安装vue-cli

1，使用 npm 安装：npm install -g @vue/cli
2，使用 yarn 安装：yarn global add @vue/cli

创建项目

vue create 项目名字

选择项目类型

Vue CLI v3.0.0-beta.6
? Please pick a preset: (Use arrow keys)
> xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 这是我运行过之后的默认设置，第一次执行create是没有的
  default (babel, eslint)
 > Manually select features  //我选的是手动安装  因为不喜欢用eslint 如果实在是不幸装了这个 就在自己配置的vue.config.js里面去加一行代码    lintOnSave:false, 表示关闭格式化检查

// 注：按键盘上下键选择默认（default）还是手动（Manually），
//如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），选择手动，上下键无法选择，可以使用：winpty vue.cmd create 项目名   来创建项目

选择特性支持

? 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)
>( ) TypeScript                                 // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support          // PWA 支持
 ( *) Router                                     // 支持 vue-router
 ( ) Vuex                                       // 支持 vuex
 (* ) CSS Pre-processors                         // 支持 CSS 预处理器。
 ( *) Linter / Formatter                         // 支持代码风格检查和格式化。
 ( ) Unit Testing                               // 支持单元测试。
 ( ) E2E Testing                                // 支持 E2E 测试。

 // 注意：你要集成什么就选就行了（注：空格键是选中与取消，A键是全选）
//打*是选的配置

选择css预处理，这里选择自己喜欢的

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
 SCSS/SASS
> LESS
  Stylus

选择ESLint + Prettier

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
//这里还是得选ESLint，不想使用的话最后还是自己配一个vue.config.js，然后这里去关闭eslint

选择语法检查方式，这里我选择保存就检测

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? 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时候检查

选择单元测试

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

把babel,postcss,eslint这些配置文件放哪，这里随便选

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里
//看个人习惯放

键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的我保存的名字为xs-default

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置

确定后，等待下载依赖模块

启动项目

初始完之后，进入到项目根目录： cd my-project
启动项目：npm run serve 或者是yarn serve
在浏览器输入http://localhost:8080就可以看到vue的欢迎界面

打包上线

vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build
执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

vue-cli3.0新建项目配置