今天,我们来学习如何利用脚手架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)