前端项目框架搭建-day02

往期文档

前端项目搭建-day01

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