如何快速搭建一个vue项目（Vue+vue-cli3.x+elementUI+echarts）如何快速搭建一个vue项目（V

前言之所以，决定写这样一篇文章，是因为我从进入项目组开始已经前前后后不止7，8次遇到要重新搭建一个vue项目的情况，之前我是整理在一个word文档上的，最近跟同事新学习了，就把之前整理的挪到上。
主要内容 1、是一个基于vue-cli3.x版本的脚手架项目
2、安装的插件：element ui、echarts （最近项目中需要用到的插件）
相关软件工具安装包含： node.js vue-cli3.x
安装node.js 注意：（官方建议，node.js的版本需要支持8.9及8.9以上版本）
1、Node.js 安装路径
官方地址：https://nodejs.org/en/download/
2、查看node版本
已经安装过的，可以直接使用下面命令查看版本

node -v

3、安装好node之后，可以将npm镜像为淘宝镜像命令，加快安装其他模块的速度（也可以不镜像直接使用 npm）：

npm install -g cnpm -registry=https://registry.npm.taobao.org

安装vue-cli3.X 最新版本 1、安装命令：

npm install -g @vue/cli

或者

cnpm install -g @vue/cli

2、查看安装版本

vue --version

或者

vue -V

项目初始化创建项目 my_project 为自定义的项目名称，可以自行命名由于原本的vue create my_project 命令创建时，上下箭头不能选择，直接使用下面命令创建

winpty vue.cmd create my_project

模板配置

如何快速搭建一个vue项目（Vue+vue-cli3.x+elementUI+echarts）

文章图片
模板.png
第一步命令后会出现两个选项，default（默认配置）和 Manually select features（自定义配置），这里我选择手动选择功能。键盘上向上以及向下箭头按键进行选择，选择 Manually select features

文章图片
自定义模板.png 设置自定义配置根据个人的项目需要来选择配置,空格键是选中与取消，A键是全选。下面是我的选项，常用项目配置这些就可以了。
【如何快速搭建一个vue项目（Vue+vue-cli3.x+elementUI+echarts）】( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // PWA 支持
( ) Router // 支持 vue-router
( ) Vuex // 支持 vuex
( ) CSS Pre-processors // 支持 CSS 预处理器。
( ) Linter / Formatter // 支持代码风格检查和格式化。
( ) Unit Testing // 支持单元测试。
( ) E2E Testing

文章图片
配置选择.png 是否使用（vue-router）路由的histoty模式这里建议选择no，hash模式可以直接使用，不用再在服务器进行配置了。具体vue-router路由模式（hash与history区别）可以参考：https://www.cnblogs.com/goloving/p/9147551.html

文章图片
路由模式.png
选择css预编译模式，我们项目中使用的是scss，node-sass和dart-sass都可以选择,这里我选择 node-scss，可以node-sass自动编译

文章图片
css预编译选择.png 选择eslint校验规则这里我选择第一个错误的时候进行校验
选择什么时候进行eslint校验这里选择一保存就进行校验，可以及时发现问题

文章图片
校验选择.png babel,postcss,eslint等配置文件放在那里这里建议选择第一个，放在一个独立的配置文件中，可以使得默认的package.json文件尽量简洁

文章图片
配置保存1.png

文章图片
配置保存2.png 是否保存这次项目的配置：如果有需要就保存，下次新建项目就是一样的配置，没有需要的话就选择N，这里我选择Y
同时，写上我的配置名称 yearConfig
Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
Save preset as: yearConfig//
等待下载依赖