примечания по синтаксису vue3, конфигурация vue3+vite2 axios router vuex element++

Vue.js

vite

不支持ie11

Создать проект

npm init @vitejs/app

имя:image.png

Выберите фреймворк для создания, здесь выберите vueimage.png

Выберите язык для использования TypeScript или javaScript здесьimage.png

Такой проект vit2+vue3 созданimage.png

cd 项目目录
npm install npm run dev

Успешный старт, открытие почти секунды

image.png

image.png

##Настроить маршрутизацию

До 4 версии

npm install vue-router@4 -s

src/router/index.ts

import {createRouter,createWebHashHistory} from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: "/",
            name: "index",
            component: () => import( "@/views/index/index"),
        },
    ]
})

export default router;

main.js

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App).use(router)
app.mount('#app')

настроить vuex

src/store/index.js

npm install vuex@next --save

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state : {
      count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
     actions: {},
    modules: {}
})
export default store

main.js

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

конфигурация vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  alias: {
    // 配置路径别名
    '@': path.resolve(__dirname, 'src'),
    'view': path.resolve(__dirname, 'src/view'),
    'com': path.resolve(__dirname, 'src/components'),
    'api': path.resolve(__dirname, 'src/api'),
    'utils': path.resolve(__dirname, 'src/utils'),
  },
  // 引入第三方的配置
  // optimizeDeps: {
  //   include: ["echarts", "axios", ]
  // },
  plugins: [vue()],
  // hostname: '0.0.0.0',
  // port: 8090,
  // 是否自动在浏览器打开
  // open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
   base: './',
   /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      },
    },
  }
})

axios

npm install axios -S

vue3 письмо

Изменения объявления переменных вместо создания функций данных используют реактивные объявления, такие как:

<template>
    <div>{{state.name}}//这里直接使用
</template>

<script>
const state=reactive({name:'malunan'})//直接声明
</script>

Метод получения излучения тот же, но запуск отличается.Например


<script>
import {defineEmit} from 'vue'//获取emit方法
const emit=defineEmit(["myemit"])//定义事件
emit('myemit')//触发emit
</script>

или

<script>
import {useContext} from 'vue'
export default{
 setup(){
    const cxt=useContext()
    cxt.emit('myemit')
    // console.log(cxt===cxt2)//true
 }
}
</script>

или

<script>
export default{
 setup(props,cxt){//也可以(props,{emit})
    cxt.emit('myemit')
 }
}
</script>

getCurrentInstance поддерживает доступ к экземплярам внутренних компонентов для расширенного использования или разработки библиотек.

import { getCurrentInstance } from 'vue'
setup() {
    const internalInstance = getCurrentInstance()
    internalInstance.appContext.config.globalProperties // 访问 globalProperties
  }

Получить контекст через useContext()

import {useContext} from 'vue'
const ctx=useContext()//这里ctx获取上下文

Определите выходной родительский компонент, доступ к которому осуществляется по ссылке

В контексте существует метод, называемыйexpose({})получить объект

//子组件
<script>
import {useContext} from 'vue'
const ctx=useContext()//这里ctx就相当于vue2 的this
ctx.expose({
  setMetod(){//定义事件
  console.log(myMetod
  )}
})
</script>

//父组件
<template>
    <div>
    <el-button @click="cont">dj</el-button>
    <Com ref="hw"></Com>//注册ref
  </div>
</template>
<script setup>
import Com from 'com/com.vue'
import {ref} from 'vue'
const hw=ref(null)//要和上面对应
const cont=()=>{
    hw.value.setMetod()//调用方法
}

</script>

ref определяет переменную

ref(10)==>по существу реактивный(значение:10)

用ref函数创建的数组不能用watch去监听В основном используется для объявления обычных переменных

import {ref} from 'vue'
setup(){
    let cou=ref(0)//定义了一个初始值为0 的变量cou  
}
return {cou}  //在组合api中  想要使用变量  必须要把变量/方法暴漏出去
//通过  cou.value 改变值   原因:本质是reactive({value:0})

реактивный определяет массив объектов

import {reactive} from 'vue'
setup(){
    let cou=reactive({name:'malunan'})//定义了一个初始值为0 的变量cou  
}
return {cou}  //在组合api中  想要使用变量  必须要把变量/方法暴漏出去

Определите, является ли это ref или реактивным типом

ref и реактивные нижние слои оцениваются по _v_ref

isRefа такжеisReactive

Представлено импортом {isRef,isReactive} vue

isRef(变量)
isRef(isReactive)

Нерекурсивное создание переменных прослушивания создание smallRef и создание smallReactive (сценарий: используется, когда объем данных относительно велик)

Если это данные, созданные с помощью smallRef. Затем vue прослушивает изменения в .value, а не изменения в первом слое.

triggerRef (переменная)

Изменение значения smallRef, активное обновление страницы
Vue не предоставляет метод triggerReactive

toRaw получает необработанные данные

import {reactive,toRaw} from 'vue'
setup(){
    let obj={name:'lnj',age:'18'}
    let state=reactive(obj)//其实这里是被包装后的，虽然指向同一个地址，但vue监听的不一样
    let obj2=toRaw(state)
    obj===obj2//true
    obj===state//false
    //直接改变obj内的变量  不会触发视图更新

    //ref创建获取原始数据
    let state=ref(obj)
    let obj2 =toRaw(state.value)
}

Если вы используете ref, чтобы изменить свойство объекта на адаптивные данные. Адаптивные данные, которые мы модифицируем, не повлияют на исходные данные.

let obj={name:'js'}
let state=ref(obj.name)
state.value='zs'  //改后  obj的数据不会发生变化

Можно сделать адаптивным с помощью toRef

toRef

let obj={name:'js'}
let state=toRef(obj,'name') //这样声明，obj的数据是会发生变化，但视图不会变化
state.value='zs'

ссылка->копировать toRef->ссылка

toRefs

Множественные объявления эквивалентны сокращению toRef

let obj={name:'js'}
let state=toRefs(obj) //这样声明，obj的数据是会发生变化，但视图不会变化
state.value='zs'

makRow Не отслеживать

Используя данные makRow(), измененные данные не будут отслеживаться и не будут обновляться после изменения представления.

customRef создать пользовательскую ссылку

Трек получения двух параметров используется для отслеживания триггера для запуска ответа и обновления интерфейса.

customRef((track,trigger)=>{
    return {
        get(){
            track();//用来追踪
            
        },
        set(newValue){
            //
            trigger();//trigger用来触发响应，更新界面
        }
    }
})

readonly создает данные только для чтения smallReadonly создает слой данных только для чтения

let state=readonly({name:'ma'})  //创建一个只读数据


let state=readonly({name:'ma'，age:{num:18}})  //创建一个只读数据,name是只读，num不受影响

isReadonly определяет, доступны ли данные только для чтения

isReadonly(state)//返回true或false

Vue.prototype заменен на config.globalProperties

Во Vue 2 Vue.prototype часто используется для добавления свойств, к которым имеют доступ все компоненты.

Эквивалентно config.globalProperties в Vue 3. Эти свойства будут скопированы в приложение как часть создания экземпляра компонента.


// 之前 - Vue 2
Vue.prototype.$http = () => {}
// 之后 - Vue 3
const app = createApp({})
app.config.globalProperties.$http = () => {}

nextTick используется в vue3

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有关的东西
})

Регистрация компонентов

// 3.x
import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}

Поддержка привязки нескольких v-моделей

Например:

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

Это также работает как альтернатива модификатору .sync.
.sync эффект дочернего компонента обновить значение родительского компонентаthis.$emit('update:title', pageTitle)Не объявляйте события в родительских компонентах

использование vuex

import {useStore} from 'vuex'
const store=useStore()

//在使用的地方直接使用 相当于  vue2的this.store
store.state.collapse;
store.commit("hadndleCollapse", !collapse);

вычисляемое использование вычисляемых свойств

import {computed} from 'vue'
setup(){
    let username=computed(()=>{
    let myname = localStorage.getItem("ms_username");
        return myname ? myname : name.value;
    })
}

Эквивалент vue2

computed:{
    username(){
        let myname = localStorage.getItem("ms_username");
        return myname ? myname : name.value;
    }
}

использование маршрутизатора

import {useRouter} from 'vue-router'
let router=useRouter()
//router 就相当于this.router

смотреть слушая

import {watch} from 'vue'
watch(
    ()=>state.count,//要监听的值
    (new,old)=>{
        console.log(new)
        console.log(old)
    }
)

несколько мониторов

watch(
    ()=>[state.count,state.title],//要监听的值
    ([newcount,oldcount],[newtitle,oldtitle])=>{
    }
)

onBeforeRouteUpdate маршрут прослушивания просмотр маршрут прослушивания был заброшен

onBeforeRouteUpdate((to,from)=>{
            console.log(to,from)
        })

Телепорт отображает дочерние узлы в узлы DOM, которые существуют за пределами родительского компонента\

  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>

мой блог

шаблон управления фоном github vue3+vite2 + конфигурация axios router vuex element++, вход в систему, + хлебные крошки, боковая панель

Категории