vue学习笔记

该笔记均来自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.com
npm 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 -D
5、安装vue-router的依赖
npm i [email protected] (固定安装3.2.0的脚本)
6、安装less相关依赖
npm i less
npm i less-loader
npm i vuex
出现一下错误

image.png

原因：2022年春节后，默认的 vuex 是 v4，跟 vue3 适配。你的项目是 vue2，匹配不上，所以失败。
解决办法：①安装vuex的低版本v3 版本即可：npm i vuex@3ornpm i [email protected]
npm install axios
⭐在调试axios中，如随便访问某个网址，调试面板中的网络中，一直不出现任何的请求，不管怎么试都没有请求，这时可以重新使用npm install axios命令，使用后问题解决

image.png

⭐在以下代码中，若index属性中的item.path不加 +' '*，则会报错
错误原因:使用element-ui的菜单，中有一个index的属性（必须为字符串），如果index的值从后端传入是个int类型的值时，则可能出现这个错误。

{{ subItem.label }}

image.png

npm i mockjs

使用gitee将代码提交到云端，在另一台电脑上下载下来，运行vue，报一下错误

image.png

重新装一下脚手架，npm install @vue/cli

npm i [email protected]

在另一台电脑运行vue，又出现了一下错误

image.png

cnpm install -g @vue/cli-service没用
cnpm install @vue/cli没用
删除node_modules文件夹，cnpm install完美解决

cnpm i js-cookie
接下来就去看视频吧，笔记已经不好描述了