概述

和Vue CLI相比，Vite创建和启动项目都非常快，Vue.js的官方也推荐使用Vite

创建过程

  1. 打开CMD，进入存放项目的文件夹

  2. 输入下面命令，然后填项目名称、选择Vue、选择JavaScript，项目几乎瞬间创建好了

    1
    npm init vite@latest

    image-20221207185134249

  3. 执行一下提示的3条命令以安装依赖和启动项目，启动后通过http://localhost:5173访问

    image-20221207185537687

  4. 成功运行的界面如下图，如果要停止项目的运行，在CMD窗口按下复制的快捷键（CTRL+C），然后确认即可

    image-20221207185836447

修改项目启动配置

接下来修改一下项目的默认端口以及项目启动后自动打开浏览器，在vite.config.js中修改，server.port是端口号，server.open的值为true时启动项目会自动打开浏览器

1
2
3
4
5
6
7
8
9
10
11
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        port: 8888,
        open: true
    }
})

安装Axios

1
npm install axios

安装和配置Vue Router

安装命令为

1
npm install vue-router@4

在src文件夹下创建一个名为router的文件夹，在里面新建一个名为index.js的文件，内容示例如下所示，routes的内容根据自己的情况写，其它不用变

1
2
3
4
5
6
7
8
9
10
11
12
import {createRouter, createWebHistory} from 'vue-router'

let history = createWebHistory()
let routes = [
    {
        path: '/',
        name: 'login',
        component: () => import('/src/view/login/index.vue')
    }
]

export default createRouter({history, routes})

在main.js文件中引入并使用，import router from './router'和.use(router)是关键代码

1
2
3
4
5
6
7
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入router
import router from './router'

createApp(App).use(router).mount('#app')

配置路径别名

首先安装path模块，安装命令为：

1
npm install --save-dev @types/node

修改vite.config.js，引入path模块并设置路径别名，resolve.alias用来配置路径别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
//引入path模块,用来设置路径别名
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        port: 8888,
        open: true
    },
    resolve: {
        //配置路径别名
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
})

配置了路径别名后，上面router配置的component的路径可以修改为@/view/login/index.vue，@代替了/src，如果项目使用TypeScript，在tsconfig.json文件中加入下面内容可以在使用别名时会出现提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    // 加上的代码
    "baseUrl": ".",
    // 加上的代码
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

安装Element Plus

安装命令

1
npm install element-plus --save

配置自动导入组件

安装unplugin-vue-components 和 unplugin-auto-import这两款插件，命令为：

1
npm install -D unplugin-vue-components unplugin-auto-import

去vite.config.js文件配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
//引入path模块,用来设置路径别名
import path from "path"
//用于自动导入Element Plus组件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        //用于自动导入Element Plus组件
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        //用于自动导入Element Plus组件
        Components({
            resolvers: [ElementPlusResolver()],
        })
    ],
    server: {
        port: 8888,
        open: true
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
})

使用图标

使用前需要安装一下，命令为：

1
npm install @element-plus/icons-vue

图标我们直接按需引入即可，引入语句如下：

1
import { Lock, User } from "@element-plus/icons-vue";

使用的代码为：

1
2
3
4
5
6
<el-icon color="red" size="33">
	<Lock/>
</el-icon>
<el-icon>
	<User/>
</el-icon>