文档：https://cli.vuejs.org/zh/guide/
参考文章：https://www.jianshu.com/p/5e13bc2eb97c
node -v 检测node版本
条件：
node >=8.9
1.全局安装 npm install -g @vue/cli
2.查看版本/是否安装成功 vue -V
3.在新文件夹下创建项目 vue create 你的项目名
按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了
这里我根据自己的学习需求选择手动
4.选择配置，看个人项目需求
注意，空格键是选中与取消，A键是全选
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
这里我个人需要用到的是Babel、Router、Vuex、CSS Pre-processors，因为本人比较懒惰，不喜欢被eslint规范，一般在项目中是直接使用vscode代码格式化插件格式化，在正式的项目中还是推荐大家使用eslint
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors 这是我选择的插件
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 这里是问我是不是使用history路由 vue-router有两种模式，hash模式和history模式 详情可参考hash模式和history模式的区别
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 我个人比较偏爱于使用less
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files 问我这里把babel,postcss,eslint这些配置文件放哪，这里随便选，第一项是指独立文件夹 第二项是指放在package.json文件里面 我选择放在独立文件夹
? Save this as a preset for future projects? No 是否作为模板下次使用 我这个这么烂的模板 我选择否
创建成功页面
创建成功 按提示 cd到创建的项目目录下(重要，以前我就是这么菜，忘记cd到项目目录下就报错了)
npm run serve 启动就完事了
网友评论