前端專案框架搭建-day02

往期文件

5、專案中加入vue-router

1、安裝vue-router的時候一定要帶上@next，否則現在安裝的還是3.x的版本

# npm
npm install vue-router@next
# yarn
yarn add vue-router@next複製程式碼

2、在src/新建資料夾router，並在router檔案加下新建index.ts檔案：

//現在建立router的方式與vue2.x的版本已經很不同了
import {createRouter, createWebHashHistory} from 'vue-router';
const routes = [
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        component: () => import('../views/home/home.vue')
    }
];
const router = createRouter({
    history: createWebHashHistory(), //替代之前的mode，是必須的
    routes
});
export default router;複製程式碼

3、在main.js中增加

import router from "./router";;
app.use(router)複製程式碼

6、專案引入vuex4.x

1、安裝vuex4.x的時候一定要帶上@next，否則現在安裝的還是3.x的版本

# npm
npm install vuex@next
# yarn
yarn add vuex@next複製程式碼

2、安裝vuex配置模組vuex-module-decorators

# npm
npm install vuex-module-decorators
# yarn
yarn add vuex-module-decorators複製程式碼

3、src目錄下新建store/index.js

import type { App } from "vue";
import { createStore, createLogger, Plugin } from "vuex";
import { config } from "vuex-module-decorators";
config.rawError = true;
const plugins: Plugin<any>[] =
  process.env.NODE_ENV == "development" ? [createLogger()] : [];
const store = createStore({
  strict: true,
  plugins,
});
export function setupStore(app: App<Element>) {
  app.use(store);
}
export default store;複製程式碼

檔案中報錯:process型別未定義，解決方案如下:

(1)、安裝@types/node

# npm
npm install --save--dev @types/node
# yarn
yarn add @types/node複製程式碼

(2)、修改tsconfig.json檔案中的types如下

{
  "compilerOptions": {
    ...
    "types": ["webpack-env", "node"],
    
  },
}複製程式碼

4、在main.js中增加

import store from './store';
app.use(store)複製程式碼

7、專案引入UI元件,配置元件按需載入

本次以ant-design-vue 2.x版本為例子

1.使用 npm 或 yarn 安裝UI元件

npm install ant-design-vue --save
yarn add ant-design-vue複製程式碼

2.配置UI元件的按需載入

(1)、安裝使用 babel-plugin-import

#npm
npm install babel-plugin-import --save-dev
#yarn
yarn add babel-plugin-import複製程式碼

(2)、修改babel配置檔案

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 會載入 less 檔案
  ]
}複製程式碼

8、專案中使用less

1、安裝less less-loader

#npm
npm install less less-loader
#yarn
yarn add less less-loader