vue样式初始化_vue-cli3初始化项目

1npm install -g @vue/cli

创建配置

创建1vue 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：单元测试，开发过程中前端对代码进行自运行测试

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

是否使用Class风格装饰器？

即原本是：home = new Vue()创建vue实例

使用装饰器后：class home extends Vue{}

大专栏  vue-cli3初始化项目ass="gutter">1Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

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

1Use 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 to select, to toggle all, to invert selection)

(*) Lint on save

( ) Lint and fix on commit

代码检查方式

保存时检查

提交时检查并修复

启动打包配置

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

原文：https://www.cnblogs.com/lijianming180/p/12370743.html