Vite+Vue3构建前端框架及模板代码及重要知识点

Python斗罗

已于 2023-03-20 20:13:07 修改

阅读量2.1w

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端

于 2022-12-10 20:07:42 首次发布

本文链接：https://blog.csdn.net/weixin_62650212/article/details/128268486

版权

前端同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

Vue3+Vite构建步骤

用`vite`初始化vue项目(回车)

npm create vite@latest vueVitePro -- --template vue

安装配置路由vue-router

npm install vue-router@4    

import router from './router/index.js'
createApp(App).use(router).mount('#app')

安装 element-plus 及图标

npm install element-plus --save
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus ).mount('#app')

npm install @element-plus/icons-vue
使用图标：   <el-icon><Setting /></el-icon>
import {Setting}  from "@element-plus/icons-vue"
components:{  Setting  }

安装axios并挂载在vue原型上

import axios from 'axios'
app.config.globalProperties.$http= axios

安装并配置全局事件总线vuex

npm install vuex@next --save

import store from './store/index.js'
createApp(App).use(store).mount('#app')

引入echarts

npm install echarts vue-echarts

import ECharts from 'vue-echarts'
import 'echarts'

createApp(App).component('e-charts',ECharts).mount('#app')

项目构建后项目目录结构及代码

项目结构及文件夹作用

在这里插入图片描述

node_modules:存放安装的依赖包

public和assets：均可用来存放图片，视频等静态资源

router：存放路由相关配置

store：存放全局事件总线相关配置

components：存放一些自定义的小型组件

views：存放页面组件（每一个页面就是一个组件）

package-lock.json：记录项目所用到的依赖和配置

index.html：起始页面

App.vue：总组件

main.js：vue组件的引入注册，配置相关文件

项目代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
  <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

App.vue

<template>
  <div>
  </div>
  <router-view></router-view>
</template>

<style scoped>
</style>
<script>
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import router from './router/index.js'

import store from './store/index.js'

import axios from 'axios'

import ECharts from 'vue-echarts'
import 'echarts'

const app=createApp(App)

app.use(store).use(router).use(ElementPlus).mount('#app')
app.component('e-charts',ECharts)
app.config.globalProperties.$http= axios

router/index.js

import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
import StudentList from '../components/StudentList.vue'
import { createRouter,createWebHashHistory} from 'vue-router'
  // 3. 创建路由实例并传递 `routes` 配置
  // 你可以在这里输入更多的配置，但我们在这里
  // 暂时保持简单
  const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes: [
      {
        path: '/', 
        component: Login,
      },
      { 
        path: '/home', 
        component: Home,
        children: [
          {
            path: 'studentlist',
            component:StudentList,
          }
        ]
      }
      ], // `routes: routes` 的缩写
  })
  
export default router

store/index.js

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
export default store

注意：components文件夹内荣自己定义，因此并未给出。router/index.js文件内组件及引入相关内容需因项目改变。

Vue3重要知识点

生命周期

2、created -> 使用 setup()	

3、beforeMount -> onBeforeMount

4、mounted -> onMounted	//在渲染完html后执行

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated	//第二次进入页面执行

7、beforeDestroy -> onBeforeUnmount

8、deactivated -> onDeactivated		//退出当前页面

9、errorCaptured -> onErrorCaptured	//浅出Vue 错误处理机制

10、activated ->	onActivated 	//每次都执行

import { onMounted, onUpdated, onUnmounted } from 'vue'
export default {
setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
};

事件

<template>
  <div id='box' class="box">
    <div class="yanjin">
      <div class="demo" ref='seder'>欢迎来到VUE3</div>
      <div class="demo" @click="testClick">欢迎来到VUE3</div>
    </div>
    <div
      v-for="(item,index) in list" :key='index'>
      <p v-if="item.type == 1" @click="setAder">
        {{item.text}}
      </p>
    </div>
    <div @click="go">跳转页面</div>
    <div @click="getRquset">点我调接口</div>
  </div>
</template>

<style src='./index.less' lang='less' scoped>
</style>
<script>
import { getFissionCourseList, getGetrequs } from "../../utils/request";
import { reactive, toRefs, onMounted, onActivated } from "vue";
export default {
  components: {},
  setup() {
    const state = reactive({
      testMsg: "原始值",
      list: [
        {
          text: 123,
          type: 1,
        },
        {
          text: 321,
          type: 0,
        },
        {
          text: 427,
          type: 1,
        },
        {
          text: 346,
          type: 0,
        },
      ],
    });
    onMounted(async () => {
      console.log("mounted!");
      // 进入页面调用接口
      await getFissionCourseList({ t35: "post" }).then((res) => {
        console.log(res);
      });
    });
    onActivated(async () => {
      let that = this;
    });
    // 点击事件
    const methods = {
      go() {
        this.$router.push({
          path: "/main",
          query: {
            course_id: 123,
          },
        });
      },
      testClick() {
        let that = this;
        that.$nextTick(function() {
          that.$refs.seder.innerHTML = "更改了内容";
        });
      },
      async getRquset() {
        await getGetrequs({ t35: "get" }).then((res) => {
          console.log(res);
        });
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
};
</script>