通过vite搭建Vue3.x项目

Vue3.x项目搭建

一、目标

• 通过vite搭建一个Vue3.x版本的项目，使用JavaScript语法，配合使用Vue3.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运行项目，查看能否正常访问首页和关于界面即可🌈