vue3基础之初创项目分析

新创建一个vue3项目,比较和vue2项目的不同(大体)

d.ts 文件

类型声明文件,不需引入,打包时自动读取,初始代码是用来让ESLint识别.vue文件

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

min.js 入口文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')
//createApp() 创建一个应用实例app(整个项目的实例)
//实际是一个回调函数
//第一个参数是 组件,传一个根组件,就可以以一个根组件和其他的子组件组合为应用的组件树
//第二个参数可选,是传递给根组件的props
//createApp(App,{a:1,b:2}).use(store).use(router).mount('#app')
//如此就可以在App组件中接收props传递的数据

// app.mount() 将应用实例挂载到某个容器元素上
//mount 函数 参数是  一个DOM 元素或是一个 CSS 选择器字符串
//对于每个应用实例,mount函数只能调用一次(只能挂载到一个容器上)

// app.use()  安装一个插件(通过链式调用写法判断出,use()返回的还是一个应用实例)
//第一个参数是 插件本身(插件可以是一个函数,也可以是一个对象,如果是对象,内部必须有一个install方法(会调用install方法作为插件使用))

HelloWord.vue 公共组件HelloWord

//script 标签 设置lang属性值为ts,才能够在标签内部书写类型(才能识别ts)
<script lang="ts">
import { defineComponent } from 'vue';
//defineComponent 定义组件时提供类型推导的辅助函数
//参数是组件对象,返回值仍是这个组件对象
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
});
</script>

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// Array<RouteRecordRaw> 数组泛型方式,给数组定义类型
//也可以写成   RouteRecordRaw[]    
//代表数据是个数组,数组内部类型都是RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
//createWebHistory()  专门用来创建history模式路由使用的函数
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

store/index.ts

import { createStore } from 'vuex'
// createStore() vuex中暴露出的实例化创建 Vuex 仓库的方法
export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

注:template模板中支持碎片化(不用必须使用一个根标签包裹了)