2. 程式人生 > 其它 >Vue3.x全家桶+vite+TS-構建Vue3基本框架

Vue3.x全家桶+vite+TS-構建Vue3基本框架

阿新 • • 發佈：2021-09-17
目錄

一、搭建基礎專案

vite詳解
vue3API詳解

1、vite建立專案

使用 vite 搭建專案

npm init @vitejs/app
or
yarn create @vitejs/app

根據步驟選擇：

  1. 專案名稱
  2. 框架（vue,react…）
  3. js或ts

3、執行專案

cd 專案目錄
npm install
npm run dev

2、環境變數設定介紹

vite serve 時是development開發模式， vite build時是production生產模式。
分別建立配置檔案： .env.development 、.env.production
注意： 命名規範 VITE_為字首的變數才會暴露給經過vite處理的程式碼

.env.development

# .env.development
VITE_APP_TITLE = MY PROJECT

.env.production

# .env.production

NODE_ENV = development

#base api
VITE_APP_BASE_API = 'http://vitetest.com'

讀取環境變數
讀取環境變數使用import.meta.env.xxx，可在 main.js中測試

// base api
console.log(import.meta.env.VITE_APP_BASE_API);

// title
console.log(import.meta.env.VITE_APP_TITLE);

vite配置多環境打包

  1. 安裝cross-env
    • cross-env 通過js在平臺設定不同的環境變數的工具
    npm install --save-dev cross-env
  2. 配置環境
    在專案打包的時候，我們通常需要根據環境變數來區分不同的環境，以請求不同的後臺介面
    那麼我們在專案的根目錄下建立如下的環境配置檔案，以production為例，在專案根目錄下建立.env.production,並新增環境變數VITE_PROJECT_ENV = 'production',需要注意的是，環境變數必須以VITE開頭
# .env.production
NODE_ENV = development
#base api
VITE_APP_BASE_API = 'http://vitetest.com'
#環境變數
VITE_PROJECT_ENV = 'production'
  1. 配置打包
    修改package.json （根據自己的實際情況增減）
"scripts": {
    "serve": "cross-env vite --mode development",
    "product": "cross-env vite --mode production",

    "build": "cross-env vite build --mode development",
    "build:product": "cross-env vite build --mode production"
 }

二、配置Router

1、安裝路由

這裡要注意我們安裝的要是4以上的所有采用@next進行安裝

npm i vue-router@next -S

2、配置路由

在 src 下新建 router 資料夾，並在資料夾內建立 index.ts
vue-router 引數

  1. 建立router例項：createRouter
  2. router的模式分為：
    - createWebHistory -- history模式
    - createWebHashHistory -- hash模式
  3. routes的約束型別是：RouteRecordRaw
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
     {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
});

export default router

擴充套件路由額外屬性
在實際專案開發中，常常會遇到這麼一個場景，某一個路由是不需要渲染到側邊欄導航上的，此時我們可以給該路由新增一個hidden屬性來實現。
在ts的強型別約束下，新增額外屬性就會報錯，那麼我們就需要擴充套件RouteRecordRaw型別。

// 聯合型別


import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
type RouteConfig = RouteRecordRaw & {hidden?: boolean}; //hidden 是可選屬性
import Home from '../views/Home.vue';
const routes: Array< RouteRecordRaw > = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];

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

export default router;

3、引入

我們在main.ts檔案中引入Vue-Router，如下所示。

import router from './router';
createApp(App).use(router).mount("#app");

最後和vue2一樣在App.vue中寫入掛在渲染的元件

<router-view/>

三、配置Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

1、安裝vuex

使用Vuex之前，需要先安裝Vuex外掛，如下所示。

npm install vuex@next --save

2、配置vuex

安裝完成之後，需要先初始化Vuex。首先，建立一個store/index.ts檔案，新增如下程式碼

import { createStore } from 'vuex'
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

封裝一下
不同模組執行不同的業務邏輯。
以使用者模組為例

  1. 新建user.ts
import REQUEST_DATA from "@/api/requestHandler";
const state = {
    userInfo:[]
};
const mutations = {
    setStateItem(state:any, data:any) {
        state[data.key] = data.value;
    }
};

const actions = {

    async getUserData({ commit }:any, data?:any):Promise<any> {
        try {
            const res = await REQUEST_DATA('userInfoUri', data);
            if (res.data.code == 200) {
                commit("setStateItem", {
                    key: "reasonList",
                    value: res.data.data
                });
                data.cb && data.cb(res.data.data.satisfaction_status)
            } else {
               //給出錯誤提示toast
                return false;
            }
        } catch (e) {
            return false;
        }
    },
};

export default {
    state,
    actions,
    mutations,
    namespaced: true
};
  1. index.ts中呼叫
import { createStore } from 'vuex'
import user from './modules/user'
const store =  createStore({
  modules: {
    user,
  },
})

export default store

3、引入

我們在main.ts檔案中引入Vuex，如下所示。

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");

4、頁面呼叫

  1. import { useStore } from 'vuex';
  2. const store = useStore();
  • store中的方法：
    方法|介紹
    :--|:--
    store.state.xxx|訪問 state
    store.getters.xxx |訪問 getter
    store.xxx |訪問 Store 的函式
    store.commit("xxx", payload?) |呼叫 （優化約束，以強化提示）
    store.commits.xxx(payload?) |呼叫 commit
    store.dispatch("xxx", payload?) |呼叫 （優化約束，以強化提示）
    store.dispatchs.xxx(payload?) |呼叫 dispatch
    store.subscribe(fn) | 優化約束，以強化提示
    store.subscribeAction(fn) | 優化約束，以強化提示
    store.mapState({...}) | 對映 state
    store.mapStateOfKeys(...) |對映 state
    store.mapGetters({...}) |對映 getters
    store.mapGettersOfKeys(...) | 對映 getters
    store.mapActions({...}) | 對映 actions
    store.mapActionsOfKeys(...) | 對映 actions
    store.mapMutations({...}) | 對映 mutations
    store.mapMutationsOfKeys(...) | 對映 mutations
<template>
  <h1>Home Page</h1>
  <h2>{{count}}</h2>
  <button @click="handleClick">click</button>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup () {
    const store = useStore();
    const count = computed(() => store.state.home.count);
    const handleClick = () => {
      store.commit('user/add');
    };
    return {
      handleClick,
      count
    };
  }
})
</script>

四、alias起別名

  1. vite.config.ts
    在過去使用vue-cli的時候，我們總是使用@去引入某些檔案，由於Vite沒有提供類似的配置，所以我們需要手動的對其進行相關配置，才能繼續使用@符號去快捷的引入檔案。首先，我們需要修改vite.config.ts的配置。
    核心程式碼
 resolve: {
    alias: [
      {
        find: '@',
        replacement: '/src',
      },
      { find: 'views', replacement: '/src/views' },
      { find: 'components', replacement: '/src/components' },
    ]
  }

完成程式碼

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
      alias:[
          {
              find:'@',
              replacement:'/src'
          },
          {
            find:'views',
            replacement:'/src/views'
          },
          {
            find:'components',
            replacement:'/src/components'
          },
          
          
      ]
  }
})
  1. tsconfig.json
    然後，我們在修改tsconfig.json檔案
    核心程式碼
 "types": ["vite/client", "jest"],
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"]
        }

完成程式碼

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "types": ["vite/client", "jest"],
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"]
        } 
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ]
}

五、基礎語法

1、定義data

  1. script標籤上：lang="ts"
  2. 定義一個型別type或者介面：interface來約束data
  3. 定義響應式資料：可以使用ref或者toRefs來
  4. 使用ref在setup讀取的時候需要獲取xxx.value,但在template中不需要
  5. 使用reactive時，可以用toRefs解構匯出，在template就可以直接使用了
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";

type Todo = {
    id: number;
    name: string;
    completed: boolean;
};

export default defineComponent({
    setup() {
        const data = reactive({
            todoList: [] as Todo[],
        });
        const count = ref(0);
        console.log(count.value);
        return {
        ...toRefs(data),
        };
    },
});
</script>

2、定義props

props需要使用PropType泛型來約束

<script lang="ts">
import { defineComponent, PropType } from "vue";

interface UserInfo {
  id: number;
  name: string;
  age: number;
}

export default defineComponent({
  props: {
    userInfo: {
      type: Object as PropType<UserInfo>, // 泛型型別
      required: true,
    },
  },
});
</script>

3、定義methods

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";

type Todo = {
  id: number;
  name: string;
  completed: boolean;
};

export default defineComponent({
  setup() {
    const data = reactive({
      todoList: [] as Todo[],
    });
    // 約束輸入和輸出型別
    const newTodo = (name: string): Todo => {
      return {
        id: 1,
        name,
        completed: false,
      };
    };
    const addTodo = (todo: Todo): void => {
      data.todoList.push(todo);
    };
    return {
      ...toRefs(data),
      newTodo,
      addTodo,
    };
  },
});
</script>

相關推薦

Vue3.x全家桶+vite+TS-構建Vue3基本框架

目錄一、搭建基礎專案1、vite建立專案3、執行專案2、環境變數設定介紹vite配置多環境打包二、配置Router1、安裝路由2、配置路由3、引入三、配置Vuex1、安裝vuex2、配置vuex3、引入4、頁面呼叫四、alias起別名五、基

vue3中使用vite-ts構建專案時vite.config的配置

// \"vite\": \"^2.6.4\", import { defineConfig } from \"vite\"; import vue from \"@vitejs/plugin-vue\";

⚡ vue3 全家桶體驗

前置 從建立一個簡單瀏覽器導航首頁專案展開，該篇隨筆包含以下內容的簡單上手：

Vue3.x 從零開始（一）—— Vue-cli構建專案

vue ui 　　 前言: vue-cli 是一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案，GitHub地址是：https://github.com/vuejs/vue-cli

詳解vite+ts快速搭建vue3專案以及介紹相關特性

vite 尤大在 vue 3.0 beta 直播中推薦了 vite 的工具，強調：針對Vue單頁面元件的無打包開發伺服器，可以直接在瀏覽器執行請求的 vue 檔案

Vue3全家桶升級指南一composition API

1、setup() vue3中的composition API中最重要的就是setup方法了，相當於元件的入口，所有的composition API都必須放到setup()中的使用。

vue3 + vite + ts 學習筆記

1、使用element-plus時預設的語言是英文，如何將其設定為中文，使用el-config-provider 來進行配置

electron+vue3+vite+ts專案中使用svg圖示

專案結構 1. 首先引入svg外掛 yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D

Vite+Electron快速構建VUE3桌面應用的實現

目錄一. 簡介二. 建立一個Vite專案1. 安裝 vite2. 建立專案3. 進入且執行三. 配置Electron1. 官方文件2. 安裝3. 配置檔案四. 執行五. 最後一. 簡介

Vue CLI 5 和 vite 建立 vue3.x 專案以及 Vue CLI 和 vite 的區別

關於 Vue CLI 和 Vite 兩種構建工具建立 Vue 3 專案的方法 這幾天進入 Vue CLI 官網，發現不能選擇 Vue CLI 的版本，也就是說查不到 vue-cli 4 以下版本的文件。

Vue3.0腳手架+typescript+vuex（基礎一）即（vue全家桶+typescript使用總結）

Vue3.0腳手架+typescript+vuex（基礎一）即（vue全家桶+typescript使用總結） 之前我們做的vue專案都是用的2.0的腳手架，但3.0的腳手架出來後，讓我們使用起來確實很不順利，比如在3.0的腳手架中加入了裝飾器，

vue3.0+vite+ts專案搭建-postcss-pxtorem 實現移動自適應(五)

這裡不考慮大屏,所以不做amfe-flexible的配置 首先是安裝依賴 yarn add postcss-loader postcss-pxtorem -D

vue3.0+vite+ts專案搭建-axios封裝(六)

封裝方式一 import axios from \'axios\' import qs from \'qs\' import { Toast } from \'vant\' import Lockr from \'lockr\'

Vue3+Vite+TS實現二次封裝element-plus業務元件sfasga

目錄1.結構字串2.返回tuple元組3.訪問Dict字典4.運用庫5.在列表中切片/步進6.用 ranges1.結構字串

vue3+vite+ts+element-plus專案搭建

知識儲備 Tips: 如果專案要求考慮IE11及以下的相容，請移步。 開始專案搭建前，你需要知道

Vue3 全家桶，從 0 到 1 實戰專案，新手有福了

前端發展百花放，一技未熟百技出。未知何處去下手，關注小編勝百書。 我是前端人，專注分享前端內容！

vue3 + vite + ts 搭建專案

1.通過vite 腳手架 npm init vite hello-vue3 -- --template vue 2.按裝依賴，啟動專案 npm i npm run dev

vue3.0+vite+ts專案搭建(報錯處理)

報錯一 warning package.json: No license field$ vue-tsc --noEmit && vite build  解決方案,新增這兩行,只新增一個是沒有用的

建立一個vue3+vite+ts的專案(包含各種整合)

使用 Vite 快速搭建 Npm npm init @vitejs/app` Yarn yarn create @vitejs/app 選擇vue- vue-ts 安裝依賴

分享 15 個 Vue3 全家桶開發的避坑經驗

原文地址：https://mp.weixin.qq.com/s/6Vd31NkpxzI07oHXZZbWrA 最近入門 Vue3 並完成 3 個專案，遇到問題蠻多的，今天就花點時間整理一下，和大家分享 15 個比較常見的問題，基本都貼出對應文件地址，還請多看文件~