❤ Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript系统篇(一)

❤ Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript系统篇(一)

1、项目环境和简介

环境

使用nvm 版本 20.10.0 node 版本 20.10.0 npm版本 10.2.3

项目简介:

Vue3全家桶+vite+TS+Pinia+Vant3/ElementPlus-搭建Vue3.x项目

项目开源地址: gitee.com/NexusLinNoa...

2、搭建开发

(1)环境准备(好了直接跳过)

建议使用nvm 管理版本: 文章:window如何使用nvm管理node版本

了解主要的版本和体系 vue主要使用的版本和对应体系

node环境

已安装 16.0 或更高版本的 Node.js 检测 : node -v

npm 环境

(2)开发运行

yarn搭建项目的命令:(建议1)

js 复制代码
yarn create vite lintaibai

这里选择的vue+TS的组合

创建项目名称 选择主要框架Vue 选择语言 项目运行成功以后提示: 依次输入命令:

bash 复制代码
cd lintaibai
yarn 
yarn dev

成功以后的页面:

3、安装Vue Router

3-1 安装Vue Router

安装Vue Router 路由

vue3需要安装4.0以上版本

bash 复制代码
yarn add vue-router@4 --save

安装完成后,在package.json中查看vue-router是否安装成功

3-2 实现主页

(1) 在src文件夹下面创建 => views 文件夹=> 下新建 lintaibai.vue

js 复制代码
<template>
  <div class="about">
     我是林太白
  </div>
</template>
<script>
  
</script>
<style>
</style>

(2)在src文件夹下面 => 新建router 文件夹=> 新建 index.ts

(3)index.ts里面进行配置主页路由

bash 复制代码
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; // 导入路由
// 1. 配置路由  lintaibai--进来时候的初始页面
const routes= [
  {
    path: "/", // 默认路由 home页面
    component: () => import("../views/lintaibai.vue"),
  },
];
// 2.返回一个 router 实列,为函数,配置 history 模式
const router = createRouter({
  history: createWebHistory(), 
  routes,
});
 
// 3.导出路由   去 main.ts 注册 router.ts
export default router

(4)在main.ts中引用router下的index.ts

bash 复制代码
import { createApp } from 'vue'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
const app = createApp(App)
app.use(router).mount('#app')

(5)在app.vue中添加路由路径 router-view

bash 复制代码
<template>
  <router-view></router-view>
</template>

此时:路由的默认跳转就可以了,项目启动之后,就会跳转到第二步骤配置的默认页面

效果:

4、安装pinia

介绍

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

使用

安装

bash 复制代码
yarn add pinia

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

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

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

js 复制代码
完整这会应该如下:
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

安装

bash 复制代码
yarn add axios

6、安装和配置 Element Plus(完整导入)

bash 复制代码
yarn add element-plus --save

main.ts中引入:

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

测试使用效果:

bash 复制代码
<el-button type="primary">Primary</el-button>

你的main.ts完整应该如下

js 复制代码
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') //挂载

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

第二篇开始持续更新中........

相关推荐
Devil枫24 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css
薛一半5 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js