VUE3+vite 项目实践

对于绝大多数前端开发工程师而言，都是跟随框架成长，其实能做到这一点已经很不容易。更有很大一部分人落后于框架，比如在vue3已经成为默认版本的今天。还是能看到有人在大型项目中用不明白async和await，甚至于then方法一起使用。路由嵌套和重定向还掌握不好，vue项目里引入jq只为一个方法。

所以，对于前端开发工程师，学习新技术是至关重要的。

学过vue3的同学一定知道，它跟React之间的相似度是越来越大，而且也引入了hook函数。结合setup标签让项目有更好的可读性，和维护性。在开发大型和超大型项目方面可以跟React相提并论。而学习vue3 其实就是学习setup函数，对于那些张口就敢说自己是全栈工程师的后端来说，他们其实只是懂得皮毛（遇到稍微复杂的问题只能求助我们）。

 如果你已经对vue2有了深入认识那学vue3就可以直接从项目着手了，比如我接下来分享的项目，就是给一个公司做的官网，用vue3+vite+pinia速度很快。用起来也很顺手。

vue3 项目的工程结构:

 

以下是main.js  整个vue3 都是引入函数。包括后面用到的ref()等。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import Navigater from './components/navigater/index.vue'
import TopNav from './components/topnav/TopNav.vue'
//引入pinia
import { createPinia } from 'pinia'
// createApp(App).mount('#app')



const pina = createPinia()
const app = createApp(App)
app.use(router)
app.use(pina)
app.component('navigater',Navigater)
app.component('topnav',TopNav)
app.mount('#app')

<template>
<topnav/>
<router-view></router-view>
<navigater/>
</template>


<script setup>
// import Navigater from './components/navigater/index.vue';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body,html{
  margin: 0px;
  padding: 0;
}
</style>

app.vue和2没区别，大家注意3里面模板里可以是多个根元素了。

这里有几个点：第一是vue3的setup标签。第二，组件引入方式。再就是响应式数据的生成方法。

<template>
  <div class="website-box">
    <div class="chose"></div>
    <div class="main">
      <component :is="FirstShow"></component>
    </div>

  </div>
</template>

<script setup>
import { FirstShow } from "./components";
import pageNumf from '../../hooks/pagNum.js'
import { useMainStore } from "../../store";
import { storeToRefs } from "pinia";
import { ref } from "vue";
//引入了pinia 后期看需求引或不引入
const mainStore = useMainStore();
const { info, pageNum } = storeToRefs(mainStore);





</script>

路由就没什么好说的了跟2没大区别；

这里看以下pinia

import {defineStore} from 'pinia'


export const useMainStore = defineStore ('main',{
    state:()=>{
        return{
            info:'pinia可以试用了',
            pageNum:0
        }
    },
    getters:{},
    action:{}
})

在组件中使用pinia

//这里引用pinia

import { useMainStore } from "../store";
import { storeToRefs } from "pinia";

export default function(num){
    const mainStore = useMainStore();
    const { pageNum } = storeToRefs(mainStore);
    pageNum.value = num
    console.log(222);

}
//上边是hooks函数 类似于2的api


//下边是直接引入hook函数

<template>
  <div class="bg-under">
    <div class="content">
      <div class="content-s"></div>
      <div class="content-use" v-for="items in content" :key="items.title">
        <div>
          <img class="icon" :src="items.imgUrl" alt="" />
        </div>
        <div class="content-title">
          <span>{{ items.tile }}&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;→</span>
          <span class="title-en">{{ items.titleEn }}</span>
        </div>
      </div>

      <div class="content-s"></div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
import pageNumf from '../../hooks/pagNum.js'
import { ref, reactive } from "vue";
export default {
  setup() {
    pageNumf(1)
    const content = reactive([
      {
        imgUrl:
          "https://lanhu.oss-cn-beijing.aliyuncs.com/psppe5x8sp26ga1c9cpbs7whoqlj1aledh86e89bb8-31bc-4aac-8046-8b65cf140792",
        tile: "智慧社区系统",
        titleEn: "Smart community",
      },
      {
        imgUrl:
          "https://lanhu.oss-cn-beijing.aliyuncs.com/ps6yuqq6yfeqbfk8xkfuqcqt5rceo9y9l8745bd9bd8-4650-4e9e-8545-846c6d2eff6f",
        tile: "智能家居系统",
        titleEn: "Smart home",
      },
      {
        imgUrl:
          "https://lanhu.oss-cn-beijing.aliyuncs.com/pswesbbvrcgglkx044tkfktsj87emtwelaf8edf845-6893-4301-be64-c49ef2b3ee1b",
        tile: "智慧工厂系统",
        titleEn: "Smart factory",
      },
      {
        imgUrl:
          "https://lanhu.oss-cn-beijing.aliyuncs.com/psvzq5t5jmxy2lkmxo4xblhtowhd1q5qlfbf10fda-42ff-4143-9334-7d2898216738",
        tile: "智慧园区系统",
        titleEn: `Smart Park`,
      },
      {
        imgUrl:
          "https://lanhu.oss-cn-beijing.aliyuncs.com/psfs5rnrsp5an8z02zob8bhgb1v4p5vk8e8e878a2-8576-446f-a63d-a0a50ba89f5c",
        tile: "智慧农业系统",
        titleEn: "mart agriculture",
      },
      {
        imgUrl:
          "https://lanhu.oss-cn-beijing.aliyuncs.com/psjc53s7v05nxjv5yhdwuhlsqurd94sgcbc1e175f2-1ef0-45cf-acba-5ecb9042ff4d",
        tile: "后台管理系统",
        titleEn: "backstage",
      },
    ]);

    return {
      content,
    };
  },
};
</script>

这个项目基本上是对着文档慢慢写出来的，一天就基本完成了所有框架。

在vue3中没有this，写法更贴近原生js，所以对组合式api支持更友好，也更有利于用TS开发。建议大家再巩固以下TS，做一个有干货的大前端，而不是在一个项目里东拼西凑把env的环境变量都写进js然后module.export。甚至还在用require引用。。。。。

  总之一句话，加油吧，不要让劣币驱逐良币。源码等我处理以下发git