该笔记均来自B站up主[程序员Allen]的视频
前端项目/vue项目实战/vue+element-ui/vue经典案例分享/紧贴实战的vue经典案例_哔哩哔哩_bilibili
tips：
报Component names should always be multi-word等错误，如不能命名Home.vue等，在vue.config.js中添加lintOnSave: false，然后重新run vue命令
vs code相关
使用快捷键Ctrl + `: 打开vscode命令台
使用Ctrl + c命令，推出控制台vue的运行界面
在首选项-设置中，搜索zoom，调整界面字体大小文字，搜索font，修改编辑器文本字体大小
安装live server插件，当编辑器代码保存后，浏览器自动刷新
安装vscode-icon插件，修改文件的图标
安装Vetur插件，vue最重要的插件
1、 安装node js
输入node -v查看node js版本
输入npm -v查看npm版本
image.png
2、安装cnpm
npm install cnpm -g --registry=https://registry.npmmirror.comnpm install -g yarn安装yarn使用
yarn命令查看yarn是否已安装成功若出现以下错误
image.png
先使用
get-executionpolicy查看计算机上的现用执行策略，一般都为Restricted
image.png
然后将vscode关闭，用管理员身份打开，输入
set-executionpolicy remotesigned修改计算机的执行策略，再使用get-executionpolicy命令，发现已经更改为RemoteSigned了
image.png
现在再使用yarn命令，便可以查看yarn的版本了
image.png
3、安装vue-cli脚手架
使用
cnpm intall -g @vue/cli命令全局安装脚手架使用
vue create app创建vue项目，依次选择vue2，yarn
image.png
cd app后，再使用
npm run serve或者yarn serve运行vue环境，但是vue网页不会自动弹出修改package.json文件中的 添加
--open --host localhost，再次运行vue环境，便会发现vue网页将自动从浏览器中打开
image.png
那么在下面这个控制台vue运行的界面，如何退出，以输入新命令呢？使用
Ctrl + c命令
image.png
4、在安装element-ui的依赖
全局引用、按需引用等多看element-ui的官方文档
组件 | Element
先使用
cd app跳转到app文件夹，再使用npm i element-ui -S安装安装element-ui的依赖按需引入
npm run build可以将项目打包，我们会发现打包的体积有4-5MB借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D5、安装vue-router的依赖
npm i vue-router@3.2.0 (固定安装3.2.0的脚本)
6、安装less相关依赖
npm i lessnpm i less-loadernpm i vuex出现一下错误
image.png
原因：2022年春节后，默认的 vuex 是 v4，跟 vue3 适配。你的项目是 vue2，匹配不上，所以失败。
解决办法：①安装vuex的低版本v3 版本即可：
npm i vuex@3ornpm i vuex@3.6.2npm install axios⭐在调试axios中，如随便访问某个网址，调试面板中的网络中，一直不出现任何的请求，不管怎么试都没有请求，这时可以重新使用
npm install axios命令，使用后问题解决
image.png
⭐在以下代码中，若index属性中的item.path不加 +' '*，则会报错
错误原因:使用element-ui的菜单，中有一个index的属性（必须为字符串），如果index的值从后端传入是个int类型的值时，则可能出现这个错误。
<el-submenu v-for="item in hasChildren" :index=" item.path+'' " :key="item.path"{{item.name}}</el-submenu>
<el-menu-item :index=" subIndex+'' ">{{ subItem.label }}</el-menu-item>
image.png
npm i mockjs
使用gitee将代码提交到云端，在另一台电脑上下载下来，运行vue，报一下错误
image.png
重新装一下脚手架，
npm install @vue/cli
npm i echarts@5.1.2
在另一台电脑运行vue，又出现了一下错误
image.png
cnpm install -g @vue/cli-service没用cnpm install @vue/cli没用删除node_modules文件夹，
cnpm install完美解决
cnpm i js-cookie
接下来就去看视频吧，笔记已经不好描述了
