本文介绍了VueCLI的作用，如何全局安装并使用它创建项目，以及不同版本的创建方法。详细说明了基于Webpack和Vite的项目初始化过程，目录结构和package.json与package-lock.json的区别。
Vue脚⼿架
Vue-cli是什么：vue-cli是vue的脚⼿架，建筑上的脚⼿架就是先搭个架⼦，然后⼯⼈们慢慢往⾥⾯砌砖头，直到建筑成型。⽽程序的脚⼿架就是帮你把⼀些环境配置、基础变量定义，⽂件结构等都搭建好，要创建新的项⽬时拿过来直接往⾥⾯添加新项⽬需要的东⻄。
为什么要⽤脚⼿架：
vue-cli创建项⽬
执⾏步骤：
1. 全局安装vue-cli，执⾏指令 npm install -g @vue/cli
2. 控制台输⼊vue验证是否出现以下⻚⾯
3. 创建⼀个项⽬
3.x 以上版本创建⽅法：
执⾏指令 vue create xxx (xxx为项⽬名)，或者采⽤图形化界⾯创建，执⾏指令 vu
eui
注意：以上指令是基于Wabpack⽣成的，然后现在Vue更推荐基于Vite的⽅式创建
执⾏指令： npm create vite@latest my-vue-app -- --template vue
2.x 版本创建⽅法：
Vue CLI >= 3 和旧版使⽤了相同的 vue
命令，所以 Vue CLI 2 ( vue-cli ) 被覆盖
了。如果你仍然需要使⽤旧版本的 vue init 功能，你可以全局安装⼀个桥接⼯具：
○
2.x 版本创建⽅法：
Vue CLI >= 3 和旧版使⽤了相同的 vue 命令，所以 Vue CLI 2 ( vue-cli ) 被覆盖 了。如果你仍然需要使⽤旧版本的 vue init 功能，你可以全局安装⼀个桥接⼯具：
■npm install -g @vue/cli-init
■ 创建项⽬：执⾏指令 vue init webpack my-project
4. 基于webpack创建项⽬的时候会让你选择环境预设，回⻋确定开始下载依赖
a. 第⼀步，快速选择环境
b. 选择本项⽬需要的⼀些配置，可以按空格键取消或选中
c. 选择Vue的版本号
d. 选择服务的配置⽂件是单独⽂件还是放在package.json中
e. 是否保存当前的预设
f. 下载库后安装成功
5. 终端进⼊到上⾯创建的项⽬⽂件夹，可以使⽤命令 cd xxx ，(xxx为上⾯的项⽬⽬录)，也可以在
vscode中选中项⽬⽂件夹右键在终端中打开
6. 在终端中运⾏执⾏ vue run serve
7. 浏览启动后的⽹⻚
⽬录结构
package.json对⽐package-lock.json
1、package.json ⽂件⾥记录有项⽬所安装的依赖项，当 node_modules 被删除时，可以再根据该⽂件 安装所需的依赖项；
2、npm 5 以前不会有 package-lock.json 这个⽂件，npm5 之后才加⼊这个⽂件；
3、当安装包的时候，npm 都会⽣成或者更新 package-lock.json 这个⽂件；
4、npm 5 之后的版本安装包的时候不需要加 --save 参数，它会⾃动保存依赖的信息；
5、当安装包的时候，会⾃动创建或者更新 package-lock.json ⽂件；
6、package-lock.json ⽂件会保存 node_modules 中所有包的信息（版本、下载地址），重新 npm install 的时候速度会提升；
7、⽂件的名称有 lock ，表示该⽂件可以⽤来锁定版本号，防⽌⾃动升级新版。
扫一扫
1087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
