vue3+ts+vite+ant学习记录

准备工作

开始之前记得先更新一下node vue的版本。Node.js 版本 >= 12.0.0
1）node可直接上官网下载最新版本覆盖一下就好了node.js
2）更新vue
windows系统:

1、npm update -g @vue/cli //删除原先的vue
2、npm install -g @vue/cli //安装
//注意：mac系统可能会删除失败，可以尝试在命令前加上

个别mac系统：
which vue（查看vue所在的目录）

sudo npm update -g @vue/cli
sudo npm install -g @vue/cli
//或者：
sudo rm /usr/local/bin/vue
sudo npm install -g @vue/cli

技术栈

这里我使用的技术栈是

• 编程语言：TypeScript 4.x + JavaScript
• 构建工具：Vite 2.x
• 前端框架：Vue 3.x
• 路由工具：Vue Router 4.x
• 状态管理：Vuex 4.x
• UI 框架：ant design vue 2.x
• CSS 预编译：Stylus / Sass / Less
• HTTP 工具：Axios

架构搭建

1、使用 Vite 快速初始化项目雏形

 //1. 使用 NPM：
npm init @vitejs/app
//2.使用 Yarn：
yarn create @vitejs/app

2、然后按照终端提示完成以下操作：
就是给项目取名字之类的东西，然后选择vue，再选择vue-ts

3、安装依赖

npm install

4、运行项目

npm run dev

修改配置

Vite 配置文件 vite.config.ts 位于根目录下，项目启动时会自动读取。这里先做一些简单配置，例如：设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。更多配置还得去官网vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})

规范目录结构

├── publish/
└── src/
—├── assets/ // 静态资源目录
—├── common/ // 通用类库目录
— ├── components/ // 公共组件目录
— ├── router/ // 路由配置目录
— ├── store/ // 状态管理目录
— ├── style/ // 通用 CSS 目录
— ├── utils/ // 工具函数目录
— ├── views/ // 页面组件目录
— ├── App.vue
— ├── main.ts
— ├── shims-vue.d.ts
├── tests/ // 单元测试目录
├── index.html
├── tsconfig.json // TypeScript 配置文件
├── vite.config.ts // Vite 配置文件
└── package.json

集成路由Vue Router

1. 安装支持 Vue3 的路由工具 vue-router@4

npm i vue-router@4

2. 创建 src/router/index.ts 文件

在 src 下创建 router 目录，然后在 router 目录里新建 index.ts 文件：

└── src/
----├── router/
---------├── index.ts // 路由配置文件

//src/router/index.ts
import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'
import Home from '@/views/home.vue'
import Vuex from '@/views/vuex.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/vuex',
    name: 'Vuex',
    component: Vuex
  },
  {
    path: '/axios',
    name: 'Axios',
    component: () => import('@/views/axios.vue') // 懒加载组件
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

根据本项目路由配置的实际情况，你需要在 src 下创建 views 目录，用来存储页面组件。
我们在 views 目录下创建 home.vue 、vuex.vue 、axios.vue。

3. 在 main.ts 文件中挂载路由配置

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

import router from './router/index'

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

4. 使用

import { useRoute, useRouter } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
		router.push({
          	path: "/vuex"
        });
    return {}
  },
}

route是路由信息对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom。
router是VueRouter的实例，包含了一些路由的跳转方法，钩子函数等

集成状态管理工具 Vuex

1. 安装支持 Vue3 的状态管理工具 vuex@next

npm i vuex@next

2. 创建 src/store/index.ts 文件。在 src 下创建 store 目录，然后在 store 目录里新建 index.ts 文件：

└── src/
—├── store/
--------├── index.ts // store 配置文件

//src/store/index.ts
import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state: typeof defaultState) {
      return 2 * state.count
    }
  }
})

3.在 main.ts 文件中挂载 Vuex 配置

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

import store from './store/index'

createApp(App).use(store).mount('#app')

集成UI 框架ant Design Vue

1. 安装

使用 npm 或 yarn 安装
$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next

2. 引入

全局引入：main.ts

//main.ts 	全局引入
import { DatePicker } from "ant-design-vue";
app.use(DatePicker);

import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'//样式引入

按需加载：vite.config.ts

//vite.config.ts
//Vite 按需
// 需要用到两个插件vite-plugin-style-import、vite-plugin-components这两个插件。
// 先下载npm i vite-plugin-style-import vite-plugin-components -D
// 然后配置vite.config.js
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';

export default defineConfig({
	plugins: [
	    vue(),
	    ViteComponents({
	      customComponentResolvers: [AntDesignVueResolver()],
	    }),
	    //按需导入ant-design-vue的css样式
	    styleImport({
	        libs: [
	            {
	                libraryName: 'ant-design-vue',
	                esModule: true,
	                resolveStyle: name => {
	                    return `ant-design-vue/dist/antd.css`
	                },
	            },
	        ],
	    }),
  ],
})

点我去官网ant

或者element-plus

1. 看官网
   点我

集成HTTP 工具 Axios

1. 安装

npm i axios

2. 配置 Axios
   先创文件

└── src/
----├── utils/
--------├── axios.ts // Axios 配置文件

//src/utils/axios.ts
import Axios from 'axios'
import { ElMessage } from 'element-plus'

const baseURL = 'https://api.github.com'

const axios = Axios.create({
  baseURL,
  timeout: 20000 // 请求超时 20s
})

// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 config 做处理
     * 这里对 config 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      ElMessage.error(`Code: ${code}, Message: ${msg}`)
      console.error(`[Axios Error]`, error.response)
    } else {
      ElMessage.error(`${error}`)
    }
    return Promise.reject(error)
  }
)

export default axios

3. 使用 Axios
   在需要使用 Axios 文件里，引入 Axios 配置文件，参考如下：

<template></template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import axios from '../utils/axios'

  export default defineComponent({
    setup() {
      axios
        .get('/users/XPoet')
        .then((res) => {
          console.log('res: ', res)
        })
        .catch((err) => {
          console.log('err: ', err)
        })
    }
  })
</script>

集成CSS 预编译器 Stylus/Sass/Less

1. 安装

npm i stylus -D
# or
npm i sass -D
npm i less -D

2.使用

<style lang="stylus">
  ...
</style>

vue3常用语法

1、setup

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。vue3将更多的方法和数据在 setup函数中定义

与 2.x 版本生命周期相对应的组合式 API:
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

1. 看下图，你发现没有，这个msg不是响应式对象

2. 应式对象(ref和reactive
   ref和reactive都是用来创建响应式对象的

<template>
    <div>home.vue  {{msg}}</div>
    <input type="text" v-model="msg">
    <div :style="{fontSize:state.size+'px',color:state.color}">	{{state.size}}+{{state.color}}</div>
    <button @click="increment">点我state.size+1</button>
</template>
<script lang="ts" setup>
    //首先引入ref, reactive
    import { ref, reactive } from "vue";
    //ref响应式对象
    const msg = ref("我乌鱼子")
    // 如果要定义多个可以使用reactive
    const state = reactive({
      size: 36,
      color: "red"
    });
    // 定义一个方法
    const increment = () => {
        state.size ++
    };
</script>

3. toRefs
   上面reactive的导出和使用，必须state.key,如果想像vue2中的data一样定义直接使用，可以使用 toRefs

<template>
    <div>home.vue  {{msg}}</div>
    <input type="text" v-model="msg">
    <div :style="{fontSize:size+'px',color:color}">{{size}}+{{color}}</div>
    <button @click="increment">点我state.size+1</button>
</template>
<script lang="ts">
//首先引入ref, reactive，,toRefs 
import { ref, reactive,toRefs } from "vue";
export default {
    name: "Home",
    setup() { //这是vue3早期的写法 没直接在script标签上setup，
        //ref响应式对象
        const msg = ref("我乌鱼子")
        // 如果要定义多个可以使用reactive
        const state = reactive({
            size: 36,
            color: "red"    
        });
        // 定义一个方法
        const increment = () => {
            state.size ++
        };
        //注意：如果不是直接在script上setup则把需要return出去
        return {
            msg,
            increment,
            ...toRefs(state)//...是es6的运算符
        };
    }
}
</script>

2、计算属性和监听

watchEffect :传入一个函数并立即执行，如果函数里面使用了上面定义好的响应式对象，当对象发生变化时，会再次触发这个函数

<template>
    <div>size  {{size}}</div>
    <input type="text" v-model="size">
    <div :style="{fontSize:size+'px'}" @click="stopwatch">{{size}}</div>
</template>
<script lang="ts">
//首先引入
import { ref, reactive,toRefs,watch,computed,watchEffect} from "vue";
export default {
    name: "Home",
    setup() { 

        // 如果要定义多个可以使用reactive
        const state = reactive({
            size: 36,
            //定义一个计算属性
            size2: computed(() => {state.size *2})
        });

        // 如果响应性的属性有变更，就会触发这个函数,但他是惰性的
        watchEffect(() => {
            console.log(`effect 触发了！${state.size}`);
        })

        //定义一个监听器
        const myWatch = watch(state,(val, oldVal)=>{
            console.log("watch ", oldVal.size);
        },{
            immediate:true //默认先执行一次
        })

        // 停止监听
        const stopwatch = () => myWatch();

        //把方法返回出去
        return {
            stopwatch,
            ...toRefs(state)//...是es6的运算符
        };
    }
}
</script>

3、dom操作

学不动了，下次继续…

4、style v-bind

在vue3.2中增加了一个style v-bind的特性，简单来说就是把我们script中的数据可以在style标签中使用
实际上这个功能的原理就是使用了css自定义属性

<template>
    <div>
        <div class="test">v-bind</div>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    const color = ref('red')
</script>
<style scoped>
    .test{
        color: v-bind(color);
        background-color: v-bind('color?"#000": "red"');//需要注意的是，v-bind里面写的js表达式必须使用引号包起来
    }
</style>

5、onMounted、computed

<template>
    <input ref="myref" type="number" v-model="count" />   
    <div>computed：{{myComputed}}</div> 
</template>
<script setup lang="ts">
import {ref,onMounted,computed} from "vue"
import router from "../router"
    let count:any = ref(1)
    console.log(count.value)
    
    //dom首次渲染完后 才能获取到真是的dom
    onMounted(()=>{
        console.log(myref)
    })

    const myComputed = computed(()=>{return count.value+1})
    myComputed.value = 123 //错误操作，不能直接修改computed值

    // 修改computed值：
    const myComputed = computed({
        get: () => count.value+1,
        set: (val)=>{
            count.value = val - 1
        }
    })
    myComputed.value = 321 //得到：320
</script>

6、vue3.x生命周期