Vue CLI笔记

Vue CLI笔记

简介

1. 目前官方推荐使用create-vue来创建基于Vite的项目
2. 是基于Vue.js进行快速开发的完整系统

命令

1. 安装命令:npm i -g @vue/cli
2. 创建项目命令:vue create 名字
3. 查看帮助(等同于vue help):vue
4. 查看版本:vue --version
5. 升级版本:npm update -g @vue/cli
6. 图形界面(可以安装和管理插件):vue ui
7. 安装插件(仅限于Vue CLI插件):vue add 名字
8. 查看所有注入的命令:npx vue-cli-service help

脚手架中的图片资源

1. 在运行时会自动编译一次
2. 存放位置
   1. 将图片资源存放在assets中
   1. 大图片会在编译时重新命名并放在dist文件夹下的img文件夹中,重命名是为了防止命名冲突
   1. 小图片的src会被编译为base64编码,减少网页对后端的请求次数,优化性能
   2. 将图片资源存放在public中
   1. 资源会原封不动的放在dist文件夹下,所以public下的资源可以直接使用绝对路径/来访问
3. 引用写法
   1. 资源路径以http或/开头(绝对路径),脚手架就不会动路径,但是如果是相对路径,脚手架就会动路径
   1. 如果图片的src前面加了冒号,还想让他正确引用,写为<img :src='require('path')'>