拉起我的手带你敲代码 - Vue项目（基础项目搭建篇）

前言

1. 由于近期时间允许，手把手搭建vue-cli4后台项目，希望能帮助到大家！
2. 如果有问题可以随时留言，我会及时回复大家！
3. 由于自己家里电脑已经很久没有用了，我们从安装本地环境开始。。。

一 、 本地环境升级

万万没有想到的是，这一步差点把我整蒙了，因为我本地的是vue-cli3项目，升级vue-cli4一直不成功，查看vue -V版本号

奇奇怪怪的问题，一直安装一直3.9.2，还以为是电脑问题，重启后依然无效，所以优秀的中国程序员的优良品质就出现了，百度一下

npm info vue

//查看vue信息

npm config get registry

//修改为淘宝镜像
npm config set registry https://registry.npm.taobao.org

 npm install -g @vue/cli

这样再次查看

我们勇敢迈出的第一步，没有以上问题，自动忽略！

二 、搭建项目

vue-cli  快速搭建项目     vue create vue-admin 可以vue serve 也可以一直vue ui 直接图形界面管理你的项目，我这里直接快速搭建一下

这是自己已经用过的一些项目的的配置项，我们选最后一个就可以

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)//检查你的项目所需的特性，空格键选择
>(*) Babel                                 ☜(转码器，可以将ES6代码转为ES5代码)
 (*) TypeScript                            ☜( js的超集，强类型语言)
 ( ) Progressive Web App (PWA) Support     ☜(渐进式Web应用程序)
 (*) Router                                ☜(vue-router（vue路由）)
 (*) Vuex                                  ☜(vuex（vue的状态管理模式）)
 (*) CSS Pre-processors                    ☜(CSS 预处理器（如：less、sass）)
 (*) Linter / Formatter                    ☜(代码风格检查和格式化（如：ESlint）)//初学者暂时不选，linter是代码质量检查工具，它会将不规范的代码也抛出成警告或错误！
 (*) Unit Testing                          ☜(单元测试)
 ( ) E2E Testing                           ☜(集成测试)

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)//选择一个版本
> 2.x
  3.x (Preview)
我们选择第2，3是预览版，建议选2

? Use class-style component syntax? (Y/n) y   // 是否使用babel做转义

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y // 是否使用class风格的组件语法

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 是否使用history模式（服务端需要配置路由映射），还是默认hash（地址栏有#符号）

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): //选择css预处理的模式

Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus 

习惯用less,你可以选自己喜欢用的一种

? Pick a linter / formatter config: // 选择语法检测规范
  ESLint with error prevention only // 只进行报错提醒 
  ESLint + Airbnb config // 不严谨模式
  ESLint + Standard config // 正常模式
> ESLint + Prettier // 严格模式 使用较多
  TSLint (deprecated) // typescript格式验证工具

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存即检测
 ( ) Lint and fix on commit  // 提交才检测

建议选择 Lint on save 这样有问题立马解决不需要事后在弄

? Pick a unit testing solution: // 各有各自的长处与短处，开发者需要根据当前项目的需求选择
  Mocha + Chai // Mocha是一个能够运行在Node和浏览器中的多功能的JavaScript测试框架，它让异步测试简单且有趣。Mocha连续地运行测试，并给出灵活而精确的报告，同时能够将错误精确地映射到测试用例上。chai 是一个强大的断言库
> Jest // 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能，配置较简单

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) // 选择配置信息存放位置

> In dedicated config files // 独立文件放置
  In package.json // 统一放置放置

独立文件放置更好的观察

? Save this as a preset for future projects? (y/N) y // 是否保存此配置，方便在以后创建项目中选择使用以上配置

cd vue-admin

yarn serve 或者 npm run serve

这样我们的一个基本搭建就成功了！