1. 介绍
- Vue脚手架是用来创建vue项目的工具包,主要是通过webpack搭建的开发环境
- 使用ES6规范:不用担心浏览器是否兼容的问题,因为webpack里面的loader会自动将es6规范转换为es5,大部分浏览器都是可以识别的
- 可以打包和压缩JS为一个文件
- 项目文件是在环境中编译,而不是在浏览器
- 可以实现页面的实时刷新
2. 准备工作
2.1 检查以下是否安装
# 确定是否已经安装 node, npm, vue-cli脚手架
# 1. 查看是否安装node
node -v
# 2. 查看是否安装npm:
npm -v
# 3. 查看是否安装vue-cli:
vue -V # 注意:显示的是脚手架的版本号
# 4. vue 最新稳定版安装
npm install vue
# 如果想要查看当前项目的vue版本,
# 可以找package.json文件, 找"dependencies"即可查看vue版本
2.2 下载vue-cli
脚手架
vue-cli
只需全局安装一次即可
npm install --global vue-cli
# 或
npm install -g vue-cli
# 或
npm i -g @vue/cli
# 判断是否已经安装vue-cli:
vue --version # 或 vue -V
3. vue-cli 2.XX
脚手架搭建项目
3.1 初始化项目
# 创建一个基于webpack模板的新项目
vue init webpack VueDemoName
# 或 创建一个简洁的模板
vue init webpack-simple VueDemoName
# 如果项目要使用sass编译css,需要额外安装以下项目依赖
cnpm install --save node-sass sass-loader@7
3.2 进入项目目录
cd VueDemoName(项目目录名称)
3.3 安装项目依赖
npm install
3.4 开发环境项目运行
npm run dev
3.5 生产环境打包发布
npm run build
npm install -g serve
serve dist
项目运行地址:http://localhost:5000
4. vue-cli 4.XX
脚手架搭建项目
4.1 创建项目
vue create vuecli4(项目名称)
4.2 配置项设置
选择手动配置项目(方向键即可选择),也可以选择之前保存的模板直接配置项目
4.3 选择配置项:空格键选择或不选
一般选项如下,也可以自定义选项
( ) 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.4 选择一个vue版本,这里我们默认是 2.x
4.5 是否使用 history router,默认n(默认使用hash模式)
- Vue-Router 利用了浏览器自身的 hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
- 建议选n,因为这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。
- 如果是选yes的话需要服务器那边再进行设置
4.6 选择css 预处理器:node-sass
- 默认是Sass/Scss(with dart-sass) ,但是我的项目选项是node-sass
- node-sass是自动编译实时的,dart-sass需要保存后才会生效
- sass 官方目前主力推dart-sass
4.7 选择Eslint代码验证规则,ESLint + Standard config
4.8 选择什么时候进行代码规则检测,默认选项
Lint on save // 保存就检测Lint and fix on commit // fix和commit时候检查复制代码