文档: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 启动就完事了