vue3.0构建项目笔记

1、使用 Vite 初始化项目
vite是一个开发构建工具，在开发过程中利用浏览器native ES Module特性导入组织代码，生产中利用rollup作为打包工具，特点：光速启动、热模块替换、按需编译。
vite官方中文文档
兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。

npm init vite@latest //或yarn create vite

2、CSS 预编译器 Stylus/Sass/Less

npm i stylus -D
npm i sass -D
npm i less -D

3、路由工具 Vue Router
Vue Router 4.0

npm install vue-router@4

//rouer.js
const Index =()=> import('../views/index.vue')
const Login =()=> import('../views/login.vue')
import {
    createRouter,
    createWebHashHistory
} from 'vue-router'
const routes=[
    { path: '/', redirect: '/index' },
    { 
        name:'Index',
        path: '/index', 
        component: Index 
    },
    { 
        name:'Login',
        path: '/login',
        component: Login 
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
export default router

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

4、UI 框架 Element Plus
element Plus官网

npm install element-plus --save

//main.js全局引入
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
//在引入 Element Plus 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。
app.use(ElementPlus, { size: 'mini', zIndex: 3000 })

5、状态管理工具 Vuex

npm i vuex@next

//store.js
import { createStore } from 'vuex'
export default createStore({
  state:{
		data:0
	},
  mutations:{
		addData(state,num){
			state.data = num.data
		}
	},
  actions:{
		updateData(ctx){
			ctx.commit('addData',{data:111})
		}
	},
})

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

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

6、HTTP 工具 Axios
axios 跟 Vue 版本没有直接关系，和之前一样使用即可。

vue3.0新增的API(部分)

1、defineComponent:vue3 如果用ts，导出时候要用 defineComponent,为了类型的审查正确.

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
    setup() {
    },
})
</script>

2、ref:定义一个响应式的数据(一般用来定义一个基本类型的响应式数据Undefined、Null、Boolean、Number和String)。
reactive:定义多个数据的响应式，接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)，响应式转换是“深层的”：会影响对象内部所有嵌套的属性,所有的数据都是响应式的。
toRefs:把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref。

<template>
    <div>{{pageName}}</div>
    <el-button>{{btn1}}</el-button>
    <el-button type="primary">{{btn2}}</el-button>
</template>
<script>
import {ref,reactive,toRefs} from 'vue'
export default {
    setup() {
        const pageName =ref('首页页面')
        const btns = reactive({
            btn1:'按钮1',
            btn2:'按钮2',
        })
        const allBtns = toRefs(btns);
        return {pageName,...allBtns}
    },
}
</script>

3、父子组件之间通讯

//父组件:
<template>
  <son :name="name" @son-msg="getSonMsg"></son>
</template>
<script>
import { ref } from 'vue'
import Son from './components/son'
export default {
  components: {
    Son
  },
  setup() {
    const name = ref('aName')
    function getSonMsg(msg) { // 子组件触发自定义事件,该函数接收值
      console.log(msg)
    }
    return {
      name,
      getSonMsg
    }
  }
}
</script>

//子组件:
<template>
  <div>
    {{name}}
    <button @click="setMsgToFather">set</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String
    }
  },
  emits: ['son-msg'], // 声明当前组件触发的自定义事件
  setup(props,context) {
    function setMsgToFather(){
      context.emit('son-msg','一条信息')
    }
    return {
      setMsgToFather
    }
  }
}
</script>