通过vite搭建Vue3.x项目
2023-09-11 14:16:33 时间
Vue3.x
项目搭建
一、目标
- 通过
vite
搭建一个Vue
3.x版本的项目,使用JavaScript
语法,配合使用Vue
3.x全家桶,包含:Vuex
和vue-router
,并引入Element Plus
组件库
二、实践
- 环境准备:
Node.js
、VSCode
、Chrome
浏览器(安装Node
、VSCode
编译器这些就不多做赘述了,VSCode
建议配合使用Volar
插件,有需求自行查找安装方法即可) - 提醒:项目中所有依赖都是通过
npm
包管理工具进行安装,读者可以使用cnpm
或yarn
等工具进行安装,如果也同样使用npm
建议配置淘宝镜像源,避免因下载速度过慢导致依赖安装失败、丢包等不必要的问题出现,配置镜像源不做赘述
1.第一步:创建Vite
的初始化项目
npm init @vitejs/app
npm init vite // 新版本使用该命令,使用上述命令会报错,第一次使用需要根据指引安装依赖
Project name
:输入项目名称Select a framework
:输入框架名称,选择vue
即可Select a variant
:项目中未选择TS,所以依然选择vue
(新版本选择JavaScript
)即可- 生成的项目的目录结构如下:
.
├── README.md
├── index.html 入口文件
├── package.json
├── public 资源文件
│ └── favicon.ico
├── src 源码
│ ├── App.vue 单文件组件
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js 入口
└── vite.config.js vite工程化配置文件
2.第二步:安装项目相关依赖
- 通过命令进入项目目录下执行:
npm install
- 依赖安装完成后执行:
npm run dev
- 通过地址查看项目能否正常启动访问
3.第三步:安装vue-router
和Vuex
npm install vue-router@next vuex@next
- 注意:这里通过
@next
进行安装的vue-router
和vuex
都是4.x
的版本
4.第四步:安装Element Plus
组件库
- 具体安装可以参考安装 | Element Plus ,使用包管理器安装的方式
npm install element-plus --save
- 安装完成后在
main.js
中导入使用
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus) // use需要放到mount之前
app.mount('#app')
- 需要注意的是
Element Plus
组件 默认 使用英语,需要自行配置国际化,在上述main.js
中添加以下代码,之后组件默认显示的都是中文了
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})
- 如果想要使用组件库中的
icon
图标库,则需要单独安装,详见文档Icon 图标 | Element Plus ,执行以下命令安装:
npm install @element-plus/icons-vue
5.第五步:规范项目目录结构,并新增路由
- 项目的
src
目录结构规范大致如下,读者可以根据公司规定或者个人喜好自行调整,将文件夹下的无用文件删除即可,components
下的HelloWorld.vue
和assets
下的logo.png
├── src
│ ├── api 数据请求接口
│ ├── assets 前端静态资源
│ ├── components 组件
│ ├── pages 页面
│ ├── router 路由配置
│ ├── store vuex数据
│ └── utils 工具函数
- 这一步可以按自己需求进行,之后在
router
文件夹下创建index.js
路由文件,这里举例说明如何使用vue-router
,例如要在pages
文件夹下新建home.vue
和about.vue
import {
createRouter,
createWebHashHistory,
} from 'vue-router'
import Home from '../pages/home.vue'
import About from '../pages/about.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
- 其中:
createRouter
用来创建路由实例,createWebHashHistory
用来配置内部使用hash
模式路由,这里与上文安装vue-router
的4.x
版本相呼应,如果vue-router
为3.x
版本,会导致项目报错,需要升级到4.x
版本 - 完成路由创建后在
main.js
中将路由引入,上述main.js
中加入以下代码
import router from './router'
...
app.use(router) // 放到mount之前
- 之后在
App.vue
中删除多余部分代码,加入以下部分:
<template>
<div>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</div>
<router-view></router-view>
</template>
- 最后:通过命令
npm run dev
运行项目,查看能否正常访问首页
和关于
界面即可🌈
相关文章
- Vue3 getters打印结果是Proxy对象,怎么获取其中的值?
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- Vue2.7正式发布!代号为:Naruto(火影忍者),原生支持 Composition API +终于可以在Vue2项目中使用Vue3的新特性了,真香~
- vue2和vue3有哪些区别和不同1
- vue3 - 定义window 全局变量
- vue3 中 pinia 的 state 修改模版绑定的 state 数据没更新?
- Vue3+vite项目中如何动态导入并创建多个全局组件
- Vue3学习笔记(一)——MVC与vue3概要、模板、数据绑定与综合示例
- 搭建 vite + vue3 + ts + pinia 项目框架
- Vue3 + Ts 封装axios
- 7个你需要知道的Vue3技巧
- Vue3中computed计算属性函数
- Vue3中的缓存问题
- vue3 中的响应式设计原理
- Vue3+TypeScript+Element Plus前端项目构建入门
- vue3 watch 异步方法