Vue3+TypeScript+Element Plus前端项目构建入门

Vue3 + TypeScript + Element Plus前端项目构建入门

• ​​安装nodeJS环境​​
• ​​创建项目​​
• ​​项目目录介绍​​
• ​​pnpm的安装​​
• ​​SCSS的安装​​
• ​​Element Plus的介绍和使用​​
• ​​路由的配置和使用​​
• ​​Vuex的介绍和使用​​
• ​​结语​​

安装nodeJS环境

开发Vue项目需要通过nmp命令来创建和启动，安装nodejs仅仅只是为了获得这个命令，和使用nodejs开发无关。
下载地址：​​​http://nodejs.cn/download/​​​ 一般下载最新包即可。
通过node --version查看版本号，可以查到表示已安装成功。

创建项目

使用 Vite 命令快速构建 Vue 项目

​​npm init vite@latest ProjectName​​

经过上面三个步骤即可快速创建Vue+TypeScript的项目

项目目录介绍

node_modules 模块包
public 公共资源
src 项目目录
assets 静态资源
components 组件
App.vue 根组件
main.ts 根函数入口，全局配置生效的地方
package.json 项目配置文件，项目的标题、版本，模块的版本等信息
tsconfig.json TS配置文件
vite.config.ts Vite配置文件

pnpm的安装

为什么使用pnpm：pnpm - 速度快、节省磁盘空间的软件包管理器
安装命令：​​​npm install -g pnpm​​

SCSS的安装

​​pnpm install sass --save​​

Element Plus的介绍和使用

Element Plus，基于Vue3，面向设计师和开发者的组件库 ​​(https://element-plus.gitee.io/zh-CN/)​​​ 安装命令：​​pnpm install element-plus --save​​

导入项目，在 main.ts 文件中边下编写代码

import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 
const app = createApp(App) 
app.use(ElementPlus)

路由的配置和使用

路由的作用：URL地址和页面适配
安装命令：​​​pnpm install vue-router@next --save​​

导入项目，在 main.ts 文件中边下编写代码

import router from './router/index'
app.use(store)

src 目录下新建文件夹 router，文件夹新建路由文件 index.ts
实现下面的映射关系

import {createRouter,createWebHistory} from 'vue-router'
import HomePage from "./views/HomePage.vue"
import LoveFlower from "./views/LoveFlower.vue"  
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomePage },
    { path: '/loveflower', component: LoveFlower },   ],
})
export default router

Vuex的介绍和使用

文档地址：​​https://vuex.vuejs.org/zh/​​​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
安装命令：​​pnpm install vuex@next --save​​
src 目录下新建文件夹 vuex，新建文件 index.ts

导入，在 main.ts 文件中边下编写代码

import store from './vuex/index
// 挂载vuex
app.use(store)

结语

经过上述不多步骤，我们就已经搭建好了一个带有基础设施，并且满足绝大多数场景的Vue项目