前言
之所以，决定写这样一篇文章，是因为我从进入项目组开始已经前前后后不止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
模板配置
第一步命令后会出现两个选项，default（默认配置）和 Manually select features（自定义配置），这里我选择手动选择功能。键盘上 向上以及向下箭头按键进行选择，选择 Manually select features
设置自定义配置
根据个人的项目需要来选择配置,空格键是选中与取消，A键是全选。下面是我的选项，常用项目配置这些就可以了 。
( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // PWA 支持
( ) Router // 支持 vue-router
( ) Vuex // 支持 vuex
( ) CSS Pre-processors // 支持 CSS 预处理器。
( ) Linter / Formatter // 支持代码风格检查和格式化。
( ) Unit Testing // 支持单元测试。
( ) E2E Testing
是否使用（vue-router）路由的histoty模式
这里建议选择no，hash模式可以直接使用，不用再在服务器进行配置了。具体vue-router路由模式（hash与history区别）可以参考：https://www.cnblogs.com/goloving/p/9147551.html
选择css预编译模式，我们项目中使用的是scss，node-sass和dart-sass都可以选择,这里我选择 node-scss，可以node-sass自动编译
选择eslint校验规则
这里我选择第一个错误的时候进行校验
选择什么时候进行eslint校验
这里选择一保存就进行校验，可以及时发现问题
babel,postcss,eslint等配置文件放在那里
这里建议选择第一个，放在一个独立的配置文件中，可以使得默认的package.json文件 尽量简洁
是否保存这次项目的配置：
如果有需要就保存，下次新建项目就是一样的配置，没有需要的话就选择N，这里我选择Y
同时，写上我的配置名称 yearConfig
Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
Save preset as: yearConfig//
等待下载依赖
注意： 如果遇到安装报错 Unexpected end of JSON input while parsing near '....3.79"，执行下面命令 然后重新执行安装操作即可
npm cache clean --force
运行项目
cd year-demo-new
cnpm run serve
安装项目依赖
安装element
vue add element
安装echarts
cnpm install echarts -S
转载参考：https://segmentfault.com/a/1190000017020755?utm_source=tag-newest
