VUE3-傻瓜式开发一（基础搭建篇）

前言： 大家好，本篇文章是vue3傻瓜式教程，适用于CV工程师，面向百度编程同学等等，意在让大家十分钟搭建一个简单的vue3项目，后续会在此基础上扩展，欢迎大家留言。

1.使用vite创建一个vue项目

npm init vite@latest my-vue-app --template vue

2. 进入项目目录执行安装包命令

npm i

安装完成后既可通过npm run dev来启动项目

3. 修改vite.config.ts文件

设置别名，方便后期文件的引入

resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },

安装下面的包，用来解决上面产生的"找不到名称__dirname"报错

`npm install  @types/node`

4.vueRoute4的安装与使用

安装

vue-router@next

使用 src下创建views文件夹，创建Home.vue和About.vue文件，方便演示。

src下创建router文件夹，创建index.ts，代码如下

import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router"
import Home from "../views/Home.vue"
import About from "../views/Home.vue"

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue")
    }
]

const router = createRouter({ // createRouter 代替了 new Router()
    history: createWebHistory(""), // 代替了history
    routes
})

export default router

在main.ts中进行注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

然后在页面中使用<router-link to="/">和<router-view />即可实现页面的简单跳转

5.vuex4的安装与使用

安装：

npm install vuex@next

使用： src目录下新建sotre文件夹，创建index.ts,代码如下

import { createStore } from "vuex"
export default createStore({
  state: {
      num: 0
  },
  mutations: {
    addNum(state, n: number) {
        state.num = state.num + n
    }
  },
  actions: {},
  modules: {},
})

在main.ts中进行注册

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
import router from './router/index'
const app = createApp(App)
app.use(store).use(router)
app.mount('#app')

在页面中使用

 <div>{{num}}</div>
 <div @click="add">+</div>

import { defineComponent, onMounted ,computed } from 'vue'
import {useStore} from 'vuex'
export default defineComponent({
  setup() {
    const store = useStore()
    const init =  ()=> {
      console.log('---store.state.num',  store.state.num)
    }
    const add = ()=> {
      store.commit('addNum', 1)
    }
    const num = computed(() => store.state.num)
    onMounted (init)
    return {
      init,add,num
    }
  },
})

至此一个最简单的vue3项目就搭建完成了，后续会继续在此基础上进行编辑，也会将vue3在常用业务中使用到的知识添加到这里，欢迎大家留言。