vue3+element plus 从入门开始_vue3+elementplus

当你需要ChatAI服务但无法魔法或没有海外手机号码时，Chat8就是你的解决方案。我们基于OpenAi开发，所有用户内容都会加密，欢迎使用!点击使用:
https://chat.chat826.com/#/register?bronk_on=375671

1,安装nodejs

环境安装包下载： http://nodejs.cn/download/
cmd查看版本号： node --version

2其他命令安装

cnpm安装命令:

npm install -g cnpm -registry=https://registry.npm.taobao.org

1
2

cnpm -v
1

官网： https://www.pnpm.cn/
pnpm安装命令：

npm install -g pnpm
1

安装pnpm镜像

npm install -g pnpm -registry=https://registry.npm.taobao.org
1

yarn安装命令：

npm install -g yarn
1

查询版本

yarn --version
1

安装镜像

yarn config set registry https://registry.npm.taobao.org/     
1

vue脚手架安装目录：

npm install -g @vue/cli
vue -V
1
2

3 创建项目

命令：

npm init vite@latest xxx
pnpm create vite@latest learning
1
2

或

vue create xxx
1

运行代码 先安装

npm install
npm run dev
1
2

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

4scss 安装

pnpm install sass  --save
1

5 element plus

官网说明 ：https://element-plus.gitee.io/zh-CN/

命令

pnpm install element-plus --save
1

在main.ts 配置
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
createApp(App)
.use(ElementPlus)
.mount(‘#app’)

6路由

命令

 pnpm install vue-router@next --save
1

新建页面
src目录下 view–>index/loginpage.vue

创建路由
src目录下新建文件夹router，文件夹新建路由文件index.ts

配置路由，写入新建的index.ts文件中
import { createRouter, createWebHistory } from ‘vue-router’
import loginpage from ‘…/view/index/LoginPage.vue’
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: “/login”, component: loginpage }
]
})
export default router;

在main.ts 配置，路径为刚创建的index.ts文件
import router from ‘./router/index’
createApp(App)
.use(ElementPlus)
.use(router)
.mount(‘#app’)

在App.vue里面加上路由标签，该标签用来装在路由视图

<router-view></router-view>
1

7对话框-提示框

页面引入

import { ElMessage } from 'element-plus'
1

使用

        ElMessage({
            type: "warning",
            message: "提示内容"
        })
1
2
3
4

8 Vuex的介绍和使用

1，介绍：https://vuex.vuejs.org/zh/
2，安装 ：pnpm install vuex@next --save
3，src目录下新建文件夹vuex，新建文件index.ts ，文件内容如下

import { createStore } from 'vuex'
import { TagModel } from '../class/TagModel'
const store = createStore({
    //状态变量
    state() {
        return {
            TagArrs: [] as TagModel[],
            Token: localStorage["token"],
            NickName: localStorage["nickname"]
        }
    },
    //方法
    mutations: {
        //添加选项卡
        AddTag(state: any, tag: TagModel) {
            if ((state.TagArrs as TagModel[]).filter(item => item.index.indexOf(tag.index) > -1).length == 0) {
                state.TagArrs.push(tag)
            }
        },
        SettingNickName(state: any, NickName) {
            state.NickName = NickName
        },
        SettingToken(state: any, Token) {
            state.Token = Token
        }
    }
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4，main 函数里导入
import store from ‘./vuex/index’
//挂载vuex
app.use(store)

8嵌套路由

路由文件中

 routes: [
        { path: "/login", component: loginpage },
        {
            path: "/",
            component: RootPage,
            children: [
                { name: "工作台2", path: "/desktop", component: DeskTop },
                { name: "个人信息2", path: "/person", component: PersonCenter },
            ]
        }
1
2
3
4
5
6
7
8
9
10

9 echarts图表的使用

官网
https://echarts.apache.org/handbook/zh/get-started
安装

pnpm install echarts --save
1

10 axios的使用，读取JSON数据

安装命令

   npm install axios --save 
1

二、src目录下新建http文件夹，新建index.ts文件
内容示例

 import axios from 'axios';
import { ref } from 'vue'
//获取登录token
export const getToken = (name: string, password: string) => {
    return instance.get(http + "/Login/GetToken?name=" + name + "&password=" + password);
}
1
2
3
4
5
6

三、在需要使用的组件里导入http中的方法即可
示例：import { getUserMenus } from '../../http/index'

11客户端处理跨域问题

在文件vite.config.ts中添加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000,
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:5294/api',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        },
    },
    build: {
        target: ['edge90', 'chrome90', 'firefox90', 'safari15']
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21