vue3.0实战项目

一、技术栈

语法演变，vue3.0更加简便！

二、功能架构

三、框架搭建

1. vite2创建项目
   
2. vite2项目结构如下：vue版本为3.2.xx
   
3. 或者使用vue cli3构建项目，输入命令vue create xxx，选择语法为vue3.0 .插件包括 router、vuex
   

四、安装插件

如果用vue-cli3搭建的时候勾选了这些插件，就不用下面的步骤，手动去安装，可以直接使用

1、路由插件vue-router4安装使用

1、输入命令npm i vue-router@4安装 vue-router4
2、新建/router/index.ts配置路由

3、路由配置代码可以参考下面的

//router/index.ts代码

//注意，这里不建议使用createWebHistory，这样二级路由跳转的时候引入外部js会失效，
//使用createWebHashHistory会在地址栏加上#号以欺骗浏览器，地址的改变是由于正在进行页内导航 ，避免了js失效的问题。
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/helloworld',
    name: 'helloworld',
    component: () => import('../components/HelloWorld.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router


//main.js代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
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
29
30
31

4、使用路由router4，路由跳转实现代码参考下面的（@click=“toPath(menu.path)”）：

<!--  -->
<template>
  <template v-for="menu in menus" :key="menu.path">
    <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.index">
      <template #title>
        <el-icon>
          <component :is="menu.meta.icon" />
        </el-icon>
        <span>{{ menu.meta.title }}</span>
      </template>
      <menu-item :menus="menu.children"></menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="menu.index" @click="toPath(menu.path)">
      <el-icon>
        <component :is="menu.meta?.icon" />
      </el-icon>
      <span>{{ menu.meta?.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { useRouter } from 'vue-router';
defineProps(['menus'])
const router = useRouter()
const toPath = (item: string) => {
  router.push({ path: item });
}
</script>

<style lang="scss" scoped>
.el-sub-menu {
    .el-menu-item {
      background-color: #312a2a;
    }
  }
</style>
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
29
30
31
32
33
34
35
36
37
38

5、获取路由route的操作如下，比如监听（包括监听函数watch的用法）路由路径变化并获取所有路由信息，具体代码如下（import { useRoute } from ‘vue-router’;）

<!-- 布局：头部 -->
<template>
   <div>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
         <el-breadcrumb-item>
            <a href="/">promotion management</a>
         </el-breadcrumb-item>
         <el-breadcrumb-item>promotion list</el-breadcrumb-item>
         <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
   </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';
const route = useRoute();
const breadcrumb = ref([]);
const getBreadcrumb = () => {
   console.log("===>", route.matched);
}
watch(() => route.path, () => {
   getBreadcrumb()
})
</script>

<style lang="scss" scoped>
</style>

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
29
30

上面的useRouter和useRoute的区别和vue2.0一样，区别：

this.$router是指所有路由，比如跳转路由地址时可使用
this.$router.push(‘/user’)或this.$router.replace(‘/home’)进行页面跳转.
This.$route是指当前路由（地址栏里的），可获取当前地址上的参数
this.$route.params.xxx
1
2
3
4

2、vuex4的安装

1. 安装npm i vuex@4或者npm i vuex@next
   
2. src下新建store目录，新建index.ts,写入如下内容，里面定义了一个数字类型count来测试使用

import { createStore } from 'vuex'
interface State{
  count:number
}
export default createStore<State>({
  state() {
    return {
      count:0
    }
  },
  mutations: {
    increment(state){
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 组件中使用案例：

<template>
  <div class="hello">
    <button @click="increment">{{count}}</button>
  </div>
</template>

<script setup>
import{useStore} from 'vuex'
const store=useStore()
const count=computed(()=>{
  return store.state.count
})
const increment=()=>{
  store.commit('increment')
}
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3、安装sass和element plus

1. vite安装步骤，可以参考官方文档：element plus
   
   安装成功后可找到相关版本编号，如下图
   
2. vue-cli安装使用步骤
   1、安装插件，输入以下命令npm install element-plus --save、
   npm install sass-loader sass -D、
   npm install -D unplugin-vue-components unplugin-auto-import
   2、全局引用element-plus并配置。在main.ts里面写入如下关于element-plus的代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
1
2
3
4
5
6
7

在组件中使用，代码和效果如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ obj.name }}</h1>
    <h1>{{ obj.age }}</h1>
    <h1>{{ sum }}</h1>
    <button @click="increment">{{count}}</button>
    <el-button @click="increment">{{count}}</el-button>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import{useStore} from 'vuex'
const msg = ref(123);
const obj = reactive({ name: "Eric", age: 12 });
const sum=computed(()=>{
  return msg.value-obj.age
})
const store=useStore()
const count=computed(()=>{
  return store.state.count
})
const increment=()=>{
  store.commit('increment')
}
</script>
<style scoped>
h1 {
  margin: 40px 0 0;
}
</style>
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
29
30
31

五、系统开发

1、页面布局

大致位置如下：

开发步骤：
1、将官网的布局代码写入组件

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
</script>
<style lang="scss">
.common-layout{
  display: flex;
  height: 100vh;
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
}
</style>
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
29
30
31
32
33
34
35
36
37

2、启动后如出现报错，Syntax Error: TypeError: this.getOptions is not a function，则是上面安装sass的版本太高，卸载npm uninstall sass-loader sass -D后依次安装如下插件即可

npm install node-sass@^7.0.1
npm install sass@^1.49.9
npm install sass-loader@^7.3.1

3、一般为了便于统一管理项目的样式，我们需要定义一些全局变量。如果你需要使用sass/scss语法定义一些全局的内容需要在项目根目录的vue.config.js文件（如果没有这个文件直接创建一个即可）下加上如下代码：注意了旧版本的sass-loader使用的是data字段，新版本的sass-loader使用的是prependData字段，我用的版本是旧版的。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 这里的值是你的全局变量文件路径，如果有多个全局变量用逗号分割开即可，如：
        // data: `@import"~@/assets/scss/main.scss";@import"~@/assets/scss/mixins/util.scss"`
        data: '@import "~@/style/global.scss";'
      }
    }
  }
1
2
3
4
5
6
7
8
9
10

4、页面效果如下

5、优化页面样式
5-1、去掉App.vue的#app的所有样式
5-2、项目public文件夹下的index.html中加入

<style>
    html,body{
      margin: 0;
    }
  style>
1
2
3
4
5

2、侧边栏开发

后面的直接看源码：
源码地址：github的源码地址

3、全局使用动态的icon图标

3-1、 按需引用图标
使用的是如下代码，使用什么引用什么：

<el-menu-item index="2">
    <el-icon><icon-menu /></el-icon>
    <template #title>Navigator Two</template>
</el-menu-item>
<el-menu-item index="3" disabled>
   <el-icon><Document /></el-icon>
   <template #title>Navigator Three</template>
</el-menu-item>

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3-2、全局使用动态的icon
3-2-1、安装依赖

npm install @element-plus/icons
1

3-2-2、main.ts引入使用,代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons'
//全局使用动态的icon
const app = createApp(App)
for (const name in ElIcons) {
  app.component(name, (ElIcons as any)[name])
}
app.use(store).use(router).use(ElementPlus).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

3-2-3、去掉手动引用，直接使用即可

4、全局提示框

类似于vue2.0的this.$message.info(),使用方式就是下面红框里的代码

效果如下