今天，我们来学习如何利用脚手架vite和cli安装一个Vue项目!开启我们编程之路！
使用vite安装项目
一、安装Vue项目步骤
1、用终端打开你要创建的目录
例如:我这里选择的是桌面的文件夹Vue文章
如果大家不知道怎么用终端打开对应目录可以使用我的方法：打开对应的文件夹，
2、在终端输入npm install -g @vue/cli
这个指令安装cli包在全局，装好之后，就允许你使用vue指令了，我们可以使用vue --version
我在这里以及安装好了这个包，所以可以直接使用指令了
3、用终端输入npm create vite@latest 项目名 -- --template vue
回车即可！
4、初始化显目设置
这里我们直接回车即可！
接下来就会显示
5、进入项目安装依赖
接下来，我们要做的就是按照项目的依赖！用vscode打开项目！并且打开终端！并且输入npm install或者npm i
接下来回车！这样我们的依赖就装好啦！
6、使用npm run dev运行项目！
打开系统给我们的本地连接，来到这个页面我们就成功创建一个Vite项目啦！如果要安装依赖，我们只要在相应的目录下安装相应的依赖就好啦！
二、项目文件介绍
我们打开文件夹，会看到一堆文件，小白可能会一眼懵，我来为大家介绍一下这个文件夹的内容。
-
.vscode 默认生成的，可删可不删。
-
.node_modules 是我们安装依赖的位置，我们按照的依赖可以在这个文件夹中看到！
-
.src 是我们进行编程的位置，我们主要看这里就可以了！
- .assets 用于存放公共的图片和css资源
- .components 用于存放组件的位置
- App.vue 等同于CDN编程模式下的template标签，也就是我们要操作的位置！
- main.js 导入vue文件，将其读成对象进行挂载 功能等同于
.mount - index.html 就是整个项目的页面
-
package.json 是整个项目的说明书，项目安装的依赖，开发依赖等。
使用cli安装项目
不过有一点要注意，cli脚手架目前处于维护状态，作者个人习惯了使用了cli脚手架，后续还会教大家使用vite。
一、安装Vue项目步骤
1、用终端打开你要创建的目录
例如:我这里选择的是桌面的文件夹Vue文章
如果大家不知道怎么用终端打开对应目录可以使用我的方法：打开对应的文件夹，
2、在终端输入npm install -g @vue/cli
这个指令安装cli包在全局，装好之后，就允许你使用vue指令了，我们可以使用vue --version
我在这里以及安装好了这个包，所以可以直接使用指令了
3、在终端输入vue create 项目名
4、初始化项目设置
在完成上一步操作之后，我们会出现这样一个页面，**注意！！**不要随意回车，用方向键选择第三项之后，回车！
前两个选项是官方给你默认封装好的设置，但是我们选择第三个，选择手动设置！
5、选择特性
在上一步操作之后，我们会出现这样一个界面
注意注意注意!! 这里千万不要随意回车！我们使用空格选中每一个特性！选择完毕之后再回车！
因为，我们本文接下来要学习的内容是使用router，所以选择这样的推荐安装：Babel，Router，CSS Pre-processors
Linter / Formatter 是我们工作时候要用到的一种代码规范，这里我们可以不选中！
6、拉取3.x模板
这里我选择3.x模板即可
7、选择Router的模式
这里为了方便我们后续的学习，我们选择history 这里默认回车就是Y 也就是yes，接下来任意操作同理！大写就是默认回车选项！
回车即可！
8、选择轻量级Sass/SCSS (with dart-sass)
这里，我们安装这个项目是为了学习router 所以我们选择轻量级Sass/SCSS (with dart-sass)
回车即可！
9、选择指定配置文件in dediacated config files
在上一步操作之后，我们选择第一个选择指定配置文件 in dediacated config files
然后回车！
10、选择是否为后续项目配置，我们选择否
因为我们现在就要拿着项目用！所以直接默认回车选择否
到这一步配置就配好啦！！它就会自动为你安装一个项目在你的文件夹当中！
这样，一个cli脚手架项目就在我们的文件目录中建立起来了！npm run serve就是运行我们的项目！
接下来就进入我们的项目当中！
11、验证项目是否能够运行
我们进入系统生成项目，使用VScode打开终端，输入npm run serve
回车！
然后打开页面给我们的网址：
我们如果打开了这个界面，项目就安装成功啦！
二、项目文件介绍
其实这里，有一些文件不同的原因是这里我们安装了一些依赖！其他文件其实功能与vite是一致的！
-
.vscode 默认生成的，可删可不删。
-
.node_modules 是我们安装依赖的位置，我们按照的依赖可以在这个文件夹中看到！
-
.src 是我们进行编程的位置，我们主要看这里就可以了！
- .assets 用于存放公共的图片和css资源
- .components 用于存放组件的位置
- .router 用于存放路由配置文件的位置
- .views用存放路由要展示的页面
- App.vue 等同于CDN编程模式下的template标签
- main.js 导入vue文件，将其读成对象进行挂载 功能等同于
.mount - index.html 就是整个项目的页面
-
package.json 是整个项目的说明书，项目安装的依赖，开发依赖等。
最后结束啦！
今天我们学习使用vite和cli安装项目就到这里啦！
值得注意的是，目前cli脚手架处于维护状态，但是我们仍然可以使用！使用vite是比较推荐的选择！
都看到这里啦！点个赞再走吧！🌹🌹🌹🌹
个人Github：一个修远君的库 (github.com)