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
组件库
npm install element-plus --save
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)
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,
} )
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)
之后在App.vue
中删除多余部分代码,加入以下部分:
< template>
< div>
< router-link to = " /" > 首页</ router-link> |
< router-link to = " /about" > 关于</ router-link>
</ div>
< router-view> </ router-view>
</ template>
最后:通过命令npm run dev
运行项目,查看能否正常访问首页
和关于
界面即可🌈