❤ 项目搭建

项目采取方式 Vue3+Pinia+Vant3/ElementPlus+typerscript

1、项目环境和简介

项目技术栈相关简介：

技术栈如下：

Vue3全家桶
vite
TS
Pinia
Vant3/ElementPlus(目前以ElementPlus为主)

环境

使用nvm 版本 20.12.0
node 版本 20.12.0
npm版本 10.5.0

• 检测自己本地的环境(我本地使用的nvm,强烈建议使用nvm管理版本)

node -v  // v20.12.0
npm -v   // 10.5.0

2、搭建开发

（1）环境准备（好了直接跳过）

建议使用nvm 管理版本：

node环境

前提条件：已安装 16.0 或更高版本的 Node.js

检测node环境

node -v  // v20.12.0

npm 环境

检测npm环境

npm -v  // v10.5.0

（2）项目新建和运行

yarn搭建项目的命令：（建议1）

// 使用vue的模板进行创建 （这是我项目使用的和本人推荐的方式 ）
yarn create vite <ProjectName> --template vue
或者采用下面这种方式 
yarn create vite lintaibai  // 普通使用vite创建

这里选择的vue+TS的组合

创建项目名称 
选择主要框架Vue  
选择语言 

项目运行成功以后提示：

依次输入命令：

cd nexus
yarn 
yarn dev

成功以后的页面：

3、安装Vue Router路由

vue3需要安装4.0以上版本

yarn add vue-router@4 --save

使用

Vue Router使用

4、安装pinia

介绍

类似vue2的vuex状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

使用

安装

yarn add pinia

修改main.ts，引入pinia提供的createPinia方法，创建根存储

import { createPinia } from 'pinia' // 引入pinia
app.use(createPinia()).use(router).mount('#app') //挂载

你的main.ts完整代码这会应该如下

完整这会应该如下：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router

const app = createApp(App)
app.use(createPinia()).use(router).mount('#app') //挂载

5、安装axios

安装

yarn add axios

6、使用ElementPlus

☞ 安装

yarn add element-plus --save

☞ 完整导入ElementPlus

main.ts中引入：

// 引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus)
app.mount('#app')

测试使用效果：

<el-button type="primary">Primary</el-button>

你的main.ts完整应该如下

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus).use(router).mount('#app') //挂载

到这里我们的基础环境和项目最基础的配置就已经好了…