(I) New Vue3+Ts+Vite project

1. Go to the directory where you want to create a project and open the PC

# input command:
# node.js version >= 12.0.0
npm init @vitejs/app
Copy the code

2. Enter the project name:

 Project name: vue3-admin
Copy the code

3. Select vUE framework and then VUE-TS:

 Select a framework: 
 vue-ts
Copy the code

4. Install project dependencies

npm i
Copy the code

5. Remove some example files and directories generated by the system

  • Delete helloWorld.vue from components
  • Modify app. vue in the SRC directory
//@/App.vue

<template>
  <h1>APP</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  components: {}
})
</script>

<style>
</style>
Copy the code

6. Complete project initialization

# Run the project
npm run dev

# Package projects
npm run build

# Preview the packaged project locally
npm run serve
Copy the code

(2) Basic dependence

(1) routing vue – the router

1. Install vue-Router 4

npm install vue-router@4
Copy the code

2. Create a home page

  • Creating new Views directory
  • Create a new Home directory under the views directory
  • Create an index.vue in the views/Home directory

3. Create a directory and file

  • Create a router directory under the SRC directory
  • Create index.ts in the router directory
// @/router/index.ts
import { createRouter,createWebHashHistory} from "vue-router";

const routes = [
  {
    path: "/".name: "home".component:  () = > import('.. /views/Home/index.vue')},]const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router;
Copy the code
Import router from './router' const app = createApp(app) ··· app.use(router) ··· app.mount('#app')Copy the code

3. Use the space below to introduce

(2) State management VUEX

1. Install VUEX 4

npm install vuex@next --save
Copy the code

2. Create a store directory and an index.ts file

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

export default Vuex.createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}});Copy the code
// @/main.ts import ··· import store from './store' const app = createApp(app) ··· app.use(store); ... the app. The mount (' # app)Copy the code
  1. Use the space below to introduce

(3) Request library VUe-axios

1. Install the vue – axios

npm install axios
Copy the code

2. Encapsulation and use are described in the following section

(4) Less installation

1. Run commands

npm install --save less less-loader
Copy the code

2. Use Less

// *.vue
<style lang="less" scoped></style>
Copy the code

(5) Component library Ant Design Vue

1. Install Ant Design Vue 2

 npm i --save ant-design-vue@next
Copy the code

2. The introduction of

Import Antd from 'ant-design-vue'; // @/main.ts import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; ... app. Use (Antd)... app. Mount (' # app)Copy the code

(6) video demonstration and source code

Demo video of this article: Click browse

More front-end content welcome to pay attention to the public number: day small day personal network