https://www.bilibili.com/video/BV1Zy4y1K7SH?p=61&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b
截屏2023-09-13 16.35.08.png
截屏2023-09-13 16.57.49.png
官方文档
https://cli.vuejs.org/zh/
- 首先安装脚手架 可以参考
vue基础入门-01 了解vue 和一些vue原理安装工作
安装命令: npm install -g @vue/cli
截屏2024-04-25 11.27.00.png
- 创建vue 项目
vue create 项目名称
注意: 如果创建一直卡住, 可以试试换npm源, 参考 https://blog.csdn.net/obliv/article/details/135759537
创建成功, 会有提示Successfully
截屏2024-04-25 14.27.26.png
-
cd 项目名称下执行npm run serve, 会生成一个页面访问的地址, 通过地址可以查看html的入口页面
截屏2024-04-25 14.26.34.png
执行执行npm run serve后, 系统会直接执行main.js`
创建项目后,会自动生成一系列文件
package.json文件中的scripts部分是脚本命令
"scripts": {
"serve": "vue-cli-service serve", //执行开启服务命令, npm run serve 就是执行的这条命令
"build": "vue-cli-service build", //打包编译命令
"lint": "vue-cli-service lint"
},
package-lock.json 文件, 包版本锁定, 类似 podfile.lock
main.js文件
该文件是整个项目的入口文件
截屏2024-04-25 14.39.03.png
index.html文件
截屏2023-09-13 17.20.17.png
BASE_URL代表public路径,
访问public文件夹下的资源favicon.ico, 可以使用<%= BASE_URL %>favicon.ico, 这里也是配置网页的图标
截屏2024-04-25 14.56.00.png
截屏2023-09-13 18.03.16.png
render 解释
截屏2024-04-25 15.15.20.png
默认配置修改
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=64&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b
主要是通过vue.config.js 文件去修改默认配置
