一.配置环境
安装node.js等
二.创建Vue项目
方法1:通过Vue CLI(脚手架)创建Vue项目
在项目目录处通过如下指令创建Vue项目
vue create my-project(项目名)
项目名处不可缺省,否则会报错
打开项目
cd my-project
运行项目
npm run serve
方法2:通过Vite创建Vue项目
在项目目录处通过如下指令创建Vue项目
create-vite my-project(项目名)
项目名处可缺省,若缺省则下一步为 “为项目命名”
该步指令的代替:
npm create vite@latest my-project(项目名)
项目名处可缺省,若缺省则下一步为 “为项目命名”
打开项目
cd my-project
安装依赖
npm install
运行项目
npm run dev
三.项目目录介绍
使用Vue CLI(脚手架)创建的Vue项目的项目目录
使用Vite创建的Vue项目的项目目录
先主要分析使用vite创建的vue项目的结构,其中最重要的有三个文件(加粗)
.vscode:存放Vite 针对 Visual Studio Code(VS Code)编辑器的配置
node_modules:存放项目依赖
public:存放静态资源(例如网站图标)
src:主要存放代码
assets:存放资源
components:存放子组件
App.vue:父组件,又叫根组件
main.js:项目的核心入口JavaScript文件
style.css:全局样式文件
.gitignore:说明推送到git仓库时需要忽略的配置
index.html:index.html模板文件
package-lock.json:用于锁定安装时的依赖版本
package.json:项目的配置文件,其中包含了项目的名称、版本号、依赖等信息
README.md:项目介绍文档
vite.config.js:Vite 的配置文件
四.运行流程说明
输入如下指令运行项目之后
npm run serve
main.js导入App.vue,基于App.vue创建结构渲染index.html