Vue脚手架的搭建项目

 基本介绍

CLI 全名是Command-Line Interface,俗称脚手架，类似于建筑楼房时搭建的脚手架

 

　

Vue CLI2 搭建项目

查看版本

vue --version

初始化项目

vue init webpack vuecli2test

在Visual Studio Code终端中输入命令 

? Project name vuecli2test 
项目名称
? Project description A Vue.js project 
项目描述
? Author 
项目作者
? Vue build standalone  
? Install vue-router? No  
安装路由
? Use ESLint to lint your code? Yes  
书写规范
? Pick an ESLint preset Standard
? Set up unit tests No 
单元测试
? Setup e2e tests with Nightwatch? No 
? Should we run `npm install` for you after the project has been created? (recommended) npm  
管理方式npm或yarn

V8引擎(Chrome)

js->二进制代码 所以编译速度快，一般浏览器是通过js->字节码->浏览器

# install dependencies
npm install

# serve with hot reload at localhost:8080 运行
npm run dev

# build for production with minification 打包
npm run build

# build for production and view the bundle analyzer report
npm run build --report


src文件中添加代码

static文件夹会原封不动复制到打包文件中

.editorconfig 代码风格

package.json  依赖包管理
README.md 书写文档

  config -> index.js-> useEslint: false 关闭输入规范选项

 

  runtime-complier

  template -> ast 抽象语法树 ->  render -> vdom 编译成虚拟dom -> UI

 

  runtime-only 性能更高，代码少

　 render -> vdom ->UI

 

Vue CLI3 搭建项目

初始化项目

vue create testvuecli3

## Project setup
npm install


### Compiles and hot-reloads for development
npm run serve




### Compiles and minifies for production
npm run build
 




### Lints and fixes files
npm run lint
 
启动图形化配置界面

vue ui  
vue.config.js 添加自定义配置
module.exports = {}