Vue脚手架配置

194 阅读1分钟

1、 安装node.js,安装好后进入命令行,输入node –v,回车,能看到版本号,说明安装成功。

2、 执行命令npm install -g cnpm --registry=registry.npm.taobao.org,安装cnpm包管理器

3、 执行命令cnpm install --global vue-cli,安装脚手架

4、 在D盘下建立一个目录,取名vuecli,在命令行下进入该目录

5、 在命令中执行vue init webpack elm,elm是项目名称,会根据该项目名称建立相应文件夹。

6、 之后系统会提示如下问题:

1)? Project name(XXX):    //项目名称,可以直接enter,使用前面设置的项目名。

2)?Project description:    //项目描述

3)?Author:              //作者

4)Vue build:             //默认使用第一项

5)?Use vue-router to lint your code?      //是否在你的项目中使用路由。随意。

6)?Use ESLint to lint your code?          //是否使用ESLint(一个语法检查工具)。no

7)?Setup unit tests with Karma + Mocha?  //是否使用单元测试。no

8)?Setup e2e tests with Nightwatch?      //是否使用e2e测试。no

9)Yes, use NPM

Yes, use Yarn

No, I will handle that myself

这是询问使用何种工具来安装依赖。由于上面使用了cnpm,所以这里选择第三项。

7、 命令行里执行cd .\elm,然后执行cnpm install

8、 安装axios,执行cnpm install axios --save

9、 安装qs,执行cnpm install qs --save

10、 将项目导入HbuilderX,进入项目的config文件夹下的index.js,修改autoOpenBrowser为true

a1f953b99df11ae8b7bc9bfbee11f6846778e27a7436349a6b636d4f3a8dd7faQzpcVXNlcnNcbGVub3ZvXEFwcERhdGFcUm9hbWluZ1xEaW5nVGFsa1wyMTYzMDAwMTA0X3YyXEltYWdlRmlsZXNcMTYyNzg4NjM3ODQ4MF81ODU1RUY4Qi02NkQ0LTRmZDUtOTkyOC1ENUZGN0FCRDc4QkUucG5n.png

11、 鼠标右键点击项目名称,选择外部命令中的npm run dev,即可启动运行项目

a44e5be0609223b2a399700ee8b98790af27ab6b36eaea19f2dc73dfbf68ff68QzpcVXNlcnNcbGVub3ZvXEFwcERhdGFcUm9hbWluZ1xEaW5nVGFsa1wyMTYzMDAwMTA0X3YyXEltYWdlRmlsZXNcMTYyNzg4NjM3ODY2OV81QUYwOTUyMi00OUE0LTQ4ZDAtQTZFNy0xRkMzRDE5RUMwQjAucG5n.png