To issue the document

Front-end project setup – DAY01

5. Vue-router was added to the project

1. Install vue-Router with @next, otherwise you will still be installing the 3.x version

# npm
npm install vue-router@next

# yarn
yarn add vue-router@next
Copy the code

SRC/router > router > index.ts

Import {createRouter, createWebHashHistory} from 'vue-router'; import {createRouter, createWebHashHistory} from 'vue-router'; const routes = [ { path: '/', redirect: '/home', }, { path: '/home', component: () => import('../views/home/home.vue') } ]; Const router = createRouter({history: createWebHashHistory(), // replace mode, required routes}); export default router;Copy the code

3. Add it to main.js

import router from "./router";;

app.use(router)
Copy the code

6. Vex4.x was introduced into the project

1. Install vex4.x with @next, otherwise you will still be installing the 3.x version

# npm
npm install vuex@next

# yarn
yarn add vuex@next
Copy the code

Install the vuex configuration module vuex-module-decorators

# npm
npm install vuex-module-decorators

# yarn
yarn add vuex-module-decorators
Copy the code

3. Create store/index.js in the SRC directory

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;

Copy the code

Error: The process type is not defined. The solution is as follows:

Install @types/node
# npm
npm install --save--dev @types/node

# yarn
yarn add @types/node
Copy the code
(2) Modify the types in tsconfig.json file as follows
{
  "compilerOptions": {
    ...
    "types": ["webpack-env", "node"],
    
  },
}

Copy the code

4. Add it to main.js

import store from './store';

app.use(store)
Copy the code

7. UI components are introduced into the project, and configuration components are loaded as required

The ant-Design-Vue 2.x version is used as an example

1. Install UI components using NPM or YARN

npm install ant-design-vue --save

yarn add ant-design-vue

Copy the code

2. Configure on-demand loading of UI components

(1) Install babel-plugin-import
#npm
npm install babel-plugin-import --save-dev

#yarn

yarn add babel-plugin-import
Copy the code

(2) Modify Babel configuration file

// .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "Es", "style" : "CSS"}] / / ` style: true ` loads less file]}Copy the code

8. Use less in projects

1. Install less less-loader

#npm
npm install less less-loader

#yarn

yarn add less less-loader
Copy the code