vue-cli3.0，vue-cli4.0搭建项目流程，git克隆项目流程

注：本人能力有限，此文章中如有说明不周或者错误的地方，欢迎大家指正，感激不尽。我也会不断更新完善。
下面描述在电脑上已经安装了node的前提下。本人使用node版本是14.15.1。
因为我之前使用的是vue-cli2.0，所以在使用4.0之前需要先卸载之前的vue-cli。

1. 卸载命令npm uninstall vue-cli -g
2. 安装新版本vue-cli，npm install -g @vue/cli
3. 检查版本号 vue -V （大写V）
4. 新建项目：vue create firstPro //firstPro是文件名，不能含大写字母
   (vue-cli 3.0以下创建项目用vue init webpack firstPro)
5. 选择预设，如果使用默认的，按enter，自定义的话使用键盘上下箭头
   
6. 项目创建完成后，不需要像vue-cli2.0那样手动装依赖包，可以直接运行项目 npm run serve
   目录结构如下：
   
   目录结构介绍：
   .git：隐藏文件，git init出来的文件夹，方便通过本地传到线上仓库。
   node_modules：项目所有依赖的包文件，webpack，babel,vue.js，插件，loader等。
   public：本地服务器的文件夹
   |index.html：主页。
   src：工作目录。
   |assets：放资源（图片，css）
   |components：放入组件
   |app.vue：根组件，入口组件
   |main.js：项目的全局配置（）
   .gitignore：上传到线上仓库时，有哪些文件是不需要上传的，放在这个配置里面。
   babel.config.js：有关babel的配置。
   package.json：项目的基本配置说明，项目名称，项目版本，项目启动命令设置，项目的依赖等。
   README：说明文件。

项目打开目录顺序：
先打开public/index.html，里面有个

，在main.js中配置渲染App.vue组件。所以app.vue是入口组件，index.html是主页。

7. 启动项目 npm run serve
如果将启动项目命令’npm run serve’改成’npm run dev’
Package.json中的script中的’serve’改成’dev’

8. 安装路由 npm install vue-router --save
使用：创建router目录，创建index.js文件，里面引入vue-router，然后创建Router实例。
然后在Main.js中引入router下的index.js，vue实例中引入router

//router下的index.js
import Router from 'vue-router'
Vue.use(Router)

//main.js文件
import router from './router'

9. 安装scss

npm install --save-dev sass-loader style-loader css-loader
npm install --save-dev extract-text-webpack-plugin
npm install --save-dev node-sass

如果报错，可能是版本问题导致，目前好用版本：

10. 安装vuex npm install --save vuex
使用：创建目录store，下面创建index.js，里面引入vuex，并use,创建vuex实例。
然后在Main.js中引入store下的index.js，vue实例中引入store


11. 安装axios npm install --save axios vue-axios
12. 安装echarts npm install --save echarts 如果报错可能版本问题，目前使用版本4.8.0。
main.js中引入echarts

项目搭建完成后，用gitHub创建新项目，将刚才本地的项目复制进去。

1）在自己的仓库中创建项目

2）填好信息后点击创建

到此项目创建成功，接下来，将项目克隆到本地，进行关联。
3）创建好项目后，回到项目的主页，复制SSH地址
4）然后回到自己本地想放置项目的目录，打开Git Bash。使用命令git clone ‘刚才复制的SSH地址’对项目进行克隆。
如下图：克隆成功。

克隆的过程中有个小插曲，就是始终报错，No such file or directory.
这是因为我的SSH key过期了，需要重新建一个。
a.打开git bash here,输入如下：
$ git config --global user.name “liuy” //配置用户名
$ git config --global user.email “liuy@163.com” //配置用户邮箱地址
b. ssh-keygen -t rsa -C "liuy@163.com"
c.回车三次后，命令行输入
cd ~/.ssh //回车
cat id_rsa.pub ——查看公钥
d.打开gitlab，点击右上角个人中心的setting，左侧选择ssh keys，将刚刚复制的公钥粘贴在key框中。点击add key。
e.重新打开git bash here，重新克隆即可。git clone ‘SSH地址’