Vue-cli2环境配置(保姆级详细过程)

一、首先创建一个文件夹,并且从cmd(命令终端)进入该文件夹。

 1. 创建文件夹

 Vue-cli2环境配置(保姆级详细过程)

         创建如图所示文件夹,位置没有特别的规定

 2. cmd进入该文件夹

        方法一:shift+鼠标右键

                Vue-cli2环境配置(保姆级详细过程)

                   点击在此处打开Powershell文件夹 

        方法二:通过cmd命令进入该文件夹

                  1. Win+R,输入cmd,加入cmd界面

                        Vue-cli2环境配置(保姆级详细过程)

                 2. 输入命令

                        Vue-cli2环境配置(保姆级详细过程)

                        成功进入!

二、Vue-cli2 的创建命令

        Vue-cli2环境配置(保姆级详细过程)

         命令格式:

                        vue init webpack 项目名称

 三、创建过程

        1. 

                Vue-cli2环境配置(保姆级详细过程)

这里是创建project的名称,可以另外创建。

如果另外创建,则会在所在的文件夹创建一个你所命名的文件夹。

如果按回车,则会创建图中小括号内的名称。

 2.

        Vue-cli2环境配置(保姆级详细过程)

 这里要求填写的是对项目的描述信息,可按回车跳过

3.

        Vue-cli2环境配置(保姆级详细过程)

 作者及其信息,可跳过

 4. 

                        Vue-cli2环境配置(保姆级详细过程)

 这边有两个选项,对于新手的话,可以先选择第一个选项(敲击回车键选择)。

但是在后期可能会更多的选择第二个选项,第二个打包出的东西相对于第一个打包的更加轻,速度更快,这里咱们先选择第一个。

 5.

        Vue-cli2环境配置(保姆级详细过程)

 这里是选择是否安装路由。有需要的话可以进行安装

 6.

        Vue-cli2环境配置(保姆级详细过程)

 这里是选择是否使用ESLint对你的代码进行规范,如果您对于您的代码规范没有把握,可以选择。

7. 

         Vue-cli2环境配置(保姆级详细过程)

 第六步选择使用ESLint对代码进行规范则会出现以上的选择。 

这里我们优先选择standard 

8. 

        Vue-cli2环境配置(保姆级详细过程) 

 这里是选择是否进行测试。

一般来说,选择no,因为会以来很多的第三方框架。

9.

        Vue-cli2环境配置(保姆级详细过程) 

 选择是否安装Nightwatch对端到端(e to e)进行测试。

这个项目用于个人练习,这里咱们选择不安装

10.

        Vue-cli2环境配置(保姆级详细过程)

 选择使用npm进行管理。

 11.

        Vue-cli2环境配置(保姆级详细过程)

 正在安装,等待安装完毕……

 四、打开项目进行查看

Vue-cli2环境配置(保姆级详细过程)

 Vue-cli2环境配置(保姆级详细过程)

 

 安装完成

 五、软件说明

我目前使用的是webstorm,偶尔使用vscode,需要webstorm资源包,可以私信,或加QQ(1562533951)

上一篇:vue-cli2及vue-cli3mock假数据(很棒)


下一篇:vue-cli2.x配置build命令构建测试包&正式包