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

前言

之所以，决定写这样一篇文章，是因为我从进入项目组开始已经前前后后不止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

模板配置

模板.png

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

自定义模板.png

设置自定义配置

根据个人的项目需要来选择配置,空格键是选中与取消，A键是全选。下面是我的选项，常用项目配置这些就可以了 。

( ) 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//

等待下载依赖

下载依赖.png

注意： 如果遇到安装报错 Unexpected end of JSON input while parsing near '....3.79"，执行下面命令 然后重新执行安装操作即可

npm cache clean --force

运行项目

cd year-demo-new
cnpm run serve

run demo.png

安装项目依赖

安装element

vue add element

image.png

安装echarts

cnpm install echarts -S

转载参考：https://segmentfault.com/a/1190000017020755?utm_source=tag-newest