1、node版本
node版本要求node>=8.9以上(推荐 8.11.0+)
使用以下命令查看node版本
node -v 如果不是最新的请到node下载下载最新版本安装即可。
2、vue-cli安装
（1）若已全局安装vue-cli (1.x 或 2.x)，需先卸载
npm uninstall vue-cli -g （2）全局安装 vue-cli3.0
npm install -g @vue/cli 3、创建项目
（1）创建项目
vue create 项目名
（2）配置
// 默认预设配置 babel, eslint default (babel, eslint) // 手动选择配置 Manually select features （3）手动选择配置项目
Vue CLI v3.4.1 ? 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) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support //支持渐进式网页应用程序 ( ) Router //路由管理器 ( ) Vuex //状态管理模式（构建一个中大型单页应用时） ( ) CSS Pre-processors //css预处理 (*) Linter / Formatter //代码风格、格式校验 ( ) Unit Testing // 单元测试 ( ) E2E Testing // 即端对端测试 - 上下键：自由选择配置项
- 空格：选中
- enter：全部选择完毕之后按下执行
（4）enter后，Installed CLI Plugins配置细节
//1、 TypeScript // 是否使用class风格的组件语法 Use class-style component syntax? // 是否使用babel做转义 Use Babel alongside TypeScript for auto-detected polyfills? // 2、Router // 路由使用历史模式 Use history mode for router? (Requires proper server setup for index fallback in production) // 3、CSS Pre-processors css预处理 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus // 4、Linter / Formatter 代码风格、格式校验 > TSLint // 仅错误预防 ESLint with error prevention only // Airbnb配置 ESLint + Airbnb config // 标准配置 ESLint + Standard config // Prettier配置（常用） ESLint + Prettier // 5、选择lint方式：Pick additional lint features // 保存时检查（常用） (*) Lint on save // 提交时检查 ( ) Lint and fix on commit // 6、Unit Testing 单元测试 Mocha + Chai Jest // 7、E2E Testing E2E（End To End）即端对端测试 Cypress (Chrome only) Nightwatch (Selenium-based) // 8、选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 // 在单独的配置文件中 In dedicated config files // 在package.json In package.json // 9、将此作为将来项目的预置吗？ Save this as a preset for future projects? // 在单独的配置文件中 In dedicated config files // 在package.json In package.json // 10、按下enter构建项目 4、启动项目
// 1、进入项目 cd 项目名 // 2、运行 npm run serve