一、介绍
是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。
二、安装node.js
去node官网下载node.js并安装(http://nodejs.cn/download/)。安装完成后可以在终端执行 $ node -v
查看node 是否安装成功.
查询npm版本号:$ npm -v
升级npm(选择操作):$ npm install -g npm
C:\Users\Administrator>node -v
v12.12.0
C:\Users\Administrator>npm -v
6.11.3
三、安装cnpm
由于我们的网络问题,下载模块时会比较缓慢,所以推荐使用淘宝镜像(选择操作)。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
四、安装vue-cli
- (1)卸载vue-cli2:
$ npm uninstall vue-cli -g
(选择操作)。 - (2)执行
$ npm install -g @vue/cli
命令进行全局安装。 - (3)检查是否安装成功终端执行
$ vue -V
或者$ vue --version
,如果显示具体的版本号则表示安装成功。具体安装方式查看官网(https://cli.vuejs.org/zh/)。
C:\Users\Administrator>vue --version
@vue/cli 4.3.1
五、创建项目
进入到自己要安装项目的文件夹目录,执行 $ vue init webpack [项目名]
或者$ vue create [项目名]
命令
(一)Vue-cli 2.x创建项目
(1)输入命令:$ vue init webpack my-project
(2)配置
Project name: [项目名称]
Project description: [项目描述]
Author: [作者]
Vue build: [构建模式,一般默认选择第一种]
Install vue-router?: [是否安装引入vue-router,vue-router是路由组件]
Use ESLint to lint your code?: [这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度]
Set up unit tests:[是否使用单元测试]
Setup e2e tests with Nightwatch:[是否要进行e2e(端到端测试),是一个自动化测试的框架]
Should we run `npm install` for you after the project has been created? (recommended): [包管理器]
(二)Vue-cli 4.x创建项目
(1)输入命令:$ vue create my-project
(2)配置
这里我们选择手动配置,按 ↓ 选择"Manually select features",再按 Enter
Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
default (babel, eslint) // 默认安装 babel,eslint
> Manually select features // 手动配置
(3)选择你需要的配置项
通过 ↑↓ 箭头选择你要配置的项,按 spacebar 是选中,按 a 是全选,按 i 是反选,选完之后按 Enter 。具体每个配置项表示什么意思在下面会有说明。
Vue CLI v4.3.1
Please pick a preset: Manually select features
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行
( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
(4)选择是否使用history router
上面我选择添加了 Router 所以这里会问我需不需要使用 history 模式,选择是然后进行下一步。
Vue CLI v4.3.1
Please pick a preset: Manually select features
Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)。
- 选择n,这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。
- 选择yes,需要服务器那边再进行设置。
(5)选择css预处理器
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。
(6)选择Eslint代码验证规则
提供一个插件化的javascript代码检测工具,ESLint + Prettier (使用较多)
Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
(7)选择什么时候进行代码规则检测
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
建议选择保存就检测,等到commit的时候,问题可能都已经积累很多了。
(8)选择单元测试
Pick a unit testing solution:
> Mocha + Chai
Jest
Mocha + Chai: 灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest :安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
(9)选择如何存放配置
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
In dedicated config files: 独立文件放置
In package.json: 放package.json里
(10)是否保存当前配置
Save this as a preset for future projects? (y/N) Test
键入N不记录,如果键入Y需要输入保存名字
六、启动项目
- (1)进入项目:
cd [项目名]
- (2)运行项目:
npm run dev
- (3)输入网址: http://localhost:8080/
七、目录结构及其对应作用
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹,一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
build/