阅读 122

VUE3-傻瓜式开发一(基础搭建篇)

qt2.webp

前言: 大家好,本篇文章是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在常用业务中使用到的知识添加到这里,欢迎大家留言。

文章分类
前端
文章标签