vue-16 vue脚手架(cli) 和脚手架默认配置修改

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 项目
1. 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 文件去修改默认配置

官方配置修改 https://cli.vuejs.org/zh/config/#lintonsave