vue-cli如何快速构建vue项目

2020-06-16 06:18:08易采站长站整理

vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

 1、安装vue-cli

使用npm全局安装vue-cli(前提是已经安装了nodejs,否则连npm都用不了)


$ npm install -g vue-cli

2、创建自己的工作空间


$ vue init webpack vuetest

3、项目信息

命令输入后,会进入安装阶段,需要用户输入一些信息


Project name (vuetest)

项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)


Project description (A Vue.js project)
//项目描述

项目描述,也可直接点击回车,使用默认名字

Author (……..)       //作者

4、用户选择


Install vue-router? (Y/n)

是否安装vue-router,这是官方的路由。这里就输入“y”后回车即可。


Use ESLint to lint your code? (Y/n)

是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作。用则选Y

Standard (https://github.com/feross/standard)

标准,什么标准呢,去给提示的standardgithub地址看一下, 原来时js的标准风格

AirBNB (https://github.com/airbnb/JavaScript)

JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法


Setup unit tests with Karma + Mocha? (Y/n)

是否安装单元测试


Setup e2e tests with Nightwatch(Y/n)?

是否安装e2e测试

5、切换到项目目录


cd vuetest

6、安装依赖


npm install

7、运行


npm run dev

8、自动打开默认浏览器显示页面

9、目录简要说明


├── build

// 项目构建(webpack)相关代码

│ ├── build.js

// 生产环境构建代码

│ ├── check-versions.js

// 检查node&npm等版本

│ ├── dev-client.js

// 热重载相关

│ ├── dev-server.js

// 构建本地服务器

│ ├── utils.js

// 构建配置公用工具