使用 npm 全局安装 vue-cli ： npm install -g @vue/cli //如果已经安装过就不用安装了
创建项目执行： vue create my-project
选择项目类型 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
// 注：按键盘上下键选择默认（default）还是手动（Manually）， //如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动，
选择特性支持 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press to select, to toggle all, 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预处理，这里我选择stylus ? 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
选择语法检查方式，这里我选择保存就检测 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 to select, to toggle all, 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) // 是否记录一下以便下次继续使用这套配置
启动项目 1.初始完之后，进入到项目根目录： cd my-project 2.启动项目：npm run serve 3.在浏览器输入http://localhost:8080就可以看到vue的欢迎界面
打包上线 1.vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build 2.执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。
