创建方式
- 基于 vite 创建(vue3官方推荐)
- 基于 vue-cli 创建
基于 vite 创建
vite 是新一代前端构建工具,优势如下:
- 轻量快速的热重载(
HMR
),能实现极速的服务启动。 - 对
TypeScript
、JSX
、CSS
等支持开箱即用。 - 真正的按需编译,不再等待整个应用编译完成。
webpack
构建 与vite
构建对比图如下:
![webpack构建](https://i-blog.csdnimg.cn/direct/c7c9ab52c879431f93a409298cb73b98.png)
![vite构建](https://i-blog.csdnimg.cn/direct/a263d50f530544639150bd18b48594ff.png)
- 具体操作如下(点击查看vue3官方文档-创建一个vue应用)
- 注意:node.js的版本必须大于v18.3.0
## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No
项目目录结构:
my-vue3-project/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components/
│ │ ├── icons/
│ │ ├── HelloWorld.vue
│ │ └── TheWelcome.vue
│ ├── router/
│ │ └── index.ts
│ ├── store/
│ │ └── counter.ts
│ ├── views/
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue
│ └── main.ts
│
├── .gitignore
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
顶级目录的文件说明
.gitignore
:用于指定哪些文件和目录不应被 Git 版本控制系统跟踪。env.d.ts
:用于定义环境变量的 TypeScript 类型声明文件。- 在 TypeScript 中,默认情况下确实不会识别
.jpg
、.txt
等非 TypeScript 或 JavaScript 相关的文件后缀名。 env.d.ts
只有一条语句:/// <reference types="vite/client" />
。这是一个三斜杠指令。env.d.ts
配置文件,让TypeScript 能识别非 TypeScript 或 JavaScript 相关的文件后缀名。- vue官方,把所有可能要写的文件都做好声明了。CTRL+鼠标左键点击
vite/client
就可以跳转到client.d.ts
,前端常用的文件都已经在这个文件里声明了。
- 在 TypeScript 中,默认情况下确实不会识别
index.html
:入口文件。通常包含对 JavaScript 包的引用和基本的页面结构。- 注意,项目的入口文件不是
main.js
、main.ts
, 是index.html
。
- 注意,项目的入口文件不是
package-lock.json
(如果使用 npm):记录了项目确切的依赖版本信息。package.json
:包含项目的元数据、依赖列表、脚本命令等。README.md
:项目的说明文档,通常包括项目的介绍、安装说明、使用方法等。tsconfig.app.json
、tsconfig.json
、tsconfig.node.json
:不同场景下的 TypeScript 配置文件,可能用于特定的编译选项或模块解析规则。vite.config.ts
:Vite 的配置文件,用于自定义 Vite 的构建行为,如设置别名、配置插件等。
main.ts
// 导入项目中的全局样式文件,通常包含一些通用的样式规则,用于为整个应用提供一致的外观。
import './assets/main.css'
// 引入 createApp 用于创建实例
import { createApp } from 'vue'
// 引入 createPinia 函数,Pinia 是 Vue 的状态管理库,用于集中管理应用的状态
import { createPinia } from 'pinia'
// 引入 App.vue 根组件
import App from './App.vue'
// 引入路由模块,用于定义应用的不同路由和页面之间的导航
import router from './router'
// 使用 createApp 函数创建一个 Vue 应用实例,并将根组件 App 传递给它
const app = createApp(App)
// 使用 app.use 方法安装 Pinia 状态管理库,使应用能够使用 Pinia 来管理状态
app.use(createPinia())
// 使用 app.use 方法安装路由模块,使应用能够使用定义好的路由进行页面导航
app.use(router)
// 将 Vue 应用实例挂载到页面中具有 id 为 app 的 DOM 元素上,使应用在浏览器中显示出来
app.mount('#app')
每个 Vue 应用都是通过 createApp
函数创建一个新的 应用实例:
import { createApp } from 'vue'
const app = createApp({
/* 根组件选项 */
})
应用实例必须在调用了 .mount()
方法后才会渲染出来。该方法接收一个“容器”参数,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串:
<div id="app"></div>
app.mount('#app')
应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount()
方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。
注意:将 Vue 应用实例挂载到一个 DOM 元素上,通常是在
index.html
文件中指定的一个元素。
比如app.mount('#app')
,id
为 app
的元素是在index.html
中:
App.vue
这是应用的根组件,通常包含应用的全局布局和导航结构,以及通过<router-view>
来展示不同路由对应的页面。
当根组件没有设置 template
选项时,Vue 将自动使用容器的 innerHTML
作为模板。
总结
Vite
项目中,index.html
是项目的入口文件,在项目最外层。- 加载
index.html
后,Vite
解析<script type="module" src="xxx">
指向的JavaScript
。 Vue3
中是通过createApp
函数创建一个应用实例。
插件
安装官方推荐的vscode
插件:
基于vue-cli创建
注意:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。
步骤如下:
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue_test
npm run serve