基于Vue-cli快速构建项目的完整步骤

前言

Vue-cli是vue.js项目的官方脚手架。Vue-cli可以快速帮助我们创建一个项目，这是提供给我们的官方脚手架。我来说说vue-cli的用法。

下面就不多说了，我们来看看详细的介绍

一、准备工作

使用vue-cli时，首先要安装nodejs和npm，其次要全局安装vue和vue-cli

1.nodejs和npm的安装方法见https://www.jb51.net/article/90518.htm

2、npm安装-g vue

3、npm安装-g vue-cli

二、vue-cli快速建设项目

安装完成后，将在目录c: \用户\和minster \ appdata \漫游\ NPM中生成几个文件。

第三，配置环境变量

Vue不是解决内部或外部命令问题

意味着系统找不到vue.cmd的地址，需要在系统环境变量的路径中加入vue.cmd的地址。

你可以全球搜索，vue.cmd

右键单击“打开文件目录”，并将该目录添加到系统环境变量路径中：

计算机——属性——高级系统设置

第四，安装完成后，创建自己的工作空间

切换到cmd中新创建的工作空间。如果已经有工作区，直接切换到工作区。

使用命令创建项目

vueinit web pack测试就是这个项目的名字，你可以随意参加。

命令输入后，将进入安装阶段，要求用户输入一些信息

1.项目名称(vuetest)可以自己指定，也可以直接用括号内的默认名称输入(注意这里的名称不能有大写字母，如果有，会给出错误，抱歉，名称不能再包含大写字母)。

2.项目描述项目描述，或直接单击输入并使用默认名称

接下来，用户将被要求选择

3.接下来，这也是一个选择题：选择一个ESLint预设(使用箭头键)。在编写vue项目时，选择一个eslit预设并编写代码样式，因为我选择了使用eslit

4.标准(https://github.com/feross/standard)标准

5.Airbnb(https://github.com/airbnb/javascript)JavaScript是最合理的方法。这个github地址是JavaScript最合理的方法

6、无(自己配置)不用说，定义自己的风格

哪个因人而异，我选择标准款式

7、用因果摩卡设置单元测试？(是/否)是否安装单元测试，我选择安装。

8、用守夜人设置e2e测试(是/否)？是否安装e2e测试，我选择安装它

9.完成

动词（verb的缩写）运行项目

执行npm安装，并在项目文件夹下运行npm开发。

如果端口在运行的项目中被占用，请在bulid文件夹下找到webpack-dev-server.js并修改端口。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。