vue-cli3初始化项目

1	npm install -g @vue/cli

创建配置

创建

1	vue create vue-app

选择配置

1 2 3 4

? Please pick a preset: (Use arrow keys) 1 (babel, eslint) default (babel, eslint) Manually select features

• 保存过的配置
• 默认配置
• 自定义配置

自定义配置

1 2 3 4 5 6 7 8 9 10

? Check the features needed for your project: (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support (*) Router ( ) Vuex (*) CSS Pre-processors (*) Linter / Formatter (*) Unit Testing ( ) E2E Testing

可以直接按数字键1,2,3,4进行选择

• Babel：将ES6编译成ES5
• TypeScript：JS超集，主要是类型检查
• Router和Vuex，路由和状态管理
• Linter/ Formatter：代码检查工具
• CSS Pre-processors：css预编译 (稍后会对这里进行配置)
• Unit Testing：单元测试，开发过程中前端对代码进行自运行测试

1	Use class-style component syntax? (Y/n) y

是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

大专栏  vue-cli3初始化项目ass="gutter"> 1

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

使用Babel与TypeScript一起用于自动检测的填充? yes

1	Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

1 2 3 4 5

? 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

使用什么css预编译器？ 看个人习惯

1 2 3 4 5 6

? Pick a linter / formatter config: (Use arrow keys) TSLint ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier

tslint: typescript格式验证工具
eslint w…: 只进行报错提醒；
eslint + A…: 不严谨模式；
eslint + S…: 正常模式；
eslint + P…: 严格模式；

建议选择正常模式

1 2 3

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) (*) Lint on save ( ) Lint and fix on commit

代码检查方式

• 保存时检查
• 提交时检查并修复

启动打包配置

可以在项目最外层新建vue.confi.js来配置端口，代理等配置，具体可以参照官方文档