vite创建vue3项目vite创建vue3项目为何选择vite vite 是一个基于 Vue3 单文件组件的非打包开

vite创建vue3项目

为何选择vite

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：

快速的冷启动，不需要等待打包操作；

即时的热模块更新，替换性能和模块数量的解耦让更新飞起；

真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）

1.初始化

(1)在需要的目录的cmd执行

npm init vite@latest 1

(2) 输入自己的项目名称

(3) 选择vue

(4) 选择vue-ts

(5) 完成

2.安装默认依赖

npm install 1

2 或

cnpm install 3

3.运行项目

//运行项目 1

npm run dev 2

//打包项目 4

npm run bulid 5

4.初期配置

用vscode进行编写代码，值得注意的是vue3中使用vscode的插件时需要禁用以前vue2常使用的插件

Vetur，而安装Vue Language Features (Volar)插件。不然代码会提示报错。

安装path模块

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

修改vite.config.js(第一种写法)

import { defineConfig } from 'vite' 1

import vue from '@vitejs/plugin-vue' 2

import path from 'path' 3

// vitejs.dev/config/ 5

export default defineConfig({ 6

plugins: [vue()], 7

//插入下面代码--- 8

resolve: { 9

alias: { 10

'@': path.resolve(__dirname, 'src') 11

} 12

} 13

//-------------- 14

}) 15

修改vite.config.ts (第二种写法)

import { defineConfig } from 'vite' 1

import vue from '@vitejs/plugin-vue' 2

import { resolve } from 'path' 3

export default defineConfig({ 5

plugins: [vue()], 6

//解决“vite use --host to expose” 7

base: './',ꢀ//不加打包后白屏 8

server: { 9

host: '0.0.0.0', 10

// port: 8080, 11

open: true 12

}, 13

resolve:{ 14

//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue' 15

alias:[ 16

{ 17

find:'@', 18

replacement:resolve(__dirname,'src') 19

} 20

] 21

} 22

}) 23

在tsconfig.json添加配置-----文件采用@方式导入

{ 1

"compilerOptions": { 2

"target": "ESNext", 3

"useDefineForClassFields": true, 4

"module": "ESNext", 5

"moduleResolution": "Node", 6

"strict": true, 7

"jsx": "preserve", 8

"resolveJsonModule": true, 9

"isolatedModules": true, 10

"esModuleInterop": true, 11

"lib": [ 12

"ESNext", 13

"DOM" 14

], 15

"skipLibCheck": true, 16

"noEmit": true, 17

//添加配置---文件采用@方式导入 18

"suppressImplicitAnyIndexErrors": true, 19

"baseUrl": ".", 20

"paths": { 21

"@/*": [ 22

"src/*" 23

] 24

} 25

//--------- 26

}, 27

"include": [ 28

"src/**/*.ts", 29

"src/**/*.d.ts", 30

"src/**/*.tsx", 31

"src/**/*.vue" 32

], 33

"references": [ 34

{ 35

"path": "./tsconfig.node.json" 36

} 37

] 38

} 39

安装路由

npm install vue-router@4 1

在src目录下创建router文件夹,在该文件夹内创下index.ts

在index.ts中配置路由

// 引入 createRouter、createWebHistory 和 RouteRecordRaw 三个模块 1

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; 2

// 定义路由规则，这里只有一个路由对象 4

const routes: Array = [ 5

{ 6

// 路径为根路径 "/" 7

path: '/', 8

// 路由名称为 "HelloWorld" 9

name: 'HelloWorld', 10

// 组件为 HelloWorld.vue 文件 11

component: () => import('@/components/HelloWorld.vue'), 12

} 13

]; 14

// 使用 createRouter 函数创建路由实例，并传入参数 history 和 routes 16

const router = createRouter({ 17

// 使用 HTML5 History API，需要后端支持 18

history: createWebHistory(), 19

// 路由规则 20

routes 21

}); 22

// 导出路由实例 24

export default router; 25

在main.ts中导入挂载路由

import { createApp } from 'vue' 1

import './style.css' 2

import App from './App.vue' 3

import router from './router' 4

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

修改App.vue管理路由

11 .logo { 12 height: 6em; 13 padding: 1.5em; 14 <a name="br7"></a>will-change: filter; 15 transition: filter 300ms; 16 } 17 .logo:hover { 18 filter: drop-shadow(0 0 2em #646cffaa); 19 } 20 .logo.vue:hover { 21 22 filter: drop-shadow(0 0 2em #42b883aa); 23 } 24 25

安装vuex

npm i vuex 1

剩下自己配仓库

安装scss

npm i scss 1

//使用如下 1

2 .read-the-docs { 3 color: #888; 4 } 5 6

安装vant

npm i vant 1

常规引用

下面是使用 Vant 组件的用法示例：

import { createApp } from 'vue'; 1

// 1. 引入你需要的组件 2

import { Button } from 'vant'; 3

// 2. 引入组件样式 4

import 'vant/lib/index.css'; 5

const app = createApp(); 7

// 3. 注册你需要的组件 9

app.use(Button); 10

Vant 支持多种组件注册方式，除了在 app 上全局注册组件，你也可以选择其他的方式，比如局部注

册，详见组件注册章节。

按需引入

在基于 vite 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以

自动引入组件，并按需引入组件的样式。

相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会

变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。

1. 安装插件

1 # 通过 npm 安装

2 npm i unplugin-vue-components -D

4 # 通过 yarn 安装

5 yarn add unplugin-vue-components -D

7 # 通过 pnpm 安装

8 pnpm add unplugin-vue-components -D

2. 配置插件

如果是基于的项目，在文件中配置插件：vitevite.config.js

1 import vue from '@vitejs/plugin-vue';

2 import Components from 'unplugin-vue-components/vite';

3 import { VantResolver } from 'unplugin-vue-components/resolvers';

5 export default {

6 plugins: [

7 vue(),

8 Components({

9 resolvers: [VantResolver()],

10 }),

11 ],

12 };

如果是基于的项目，在文件中配置插件：

1 const { VantResolver } = require('unplugin-vue-components/resolvers');

2 const ComponentsPlugin = require('unplugin-vue-components/webpack');

4 module.exports = {

5 configureWebpack: {

6 plugins: [

7 ComponentsPlugin({

8 resolvers: [VantResolver()],

9 }),

10 ],

11 },

12 };

如果是基于的项目，在文件中配置插件：

1 const { VantResolver } = require('unplugin-vue-components/resolvers');

2 const ComponentsPlugin = require('unplugin-vue-components/webpack');

4 module.exports = {

5 plugins: [

6 ComponentsPlugin({

7 resolvers: [VantResolver()],

8 }),

9 ],

10 };

3. 使用组件

完成以上两步，就可以直接在模板中使用 Vant 组件了，会解析模板并自动注册对应的组件。

4. 引入函数组件的样式

Vant 中有个别组件是以函数的形式提供的，包括，，和组件。在使用函数组件时，无法自动引入对

应的样式，因此需要手动引入样式。

1 // Toast

2 import { showToast } from 'vant';

3 import 'vant/es/toast/style';

5 // Dialog

6 import { showDialog } from 'vant';

7 import 'vant/es/dialog/style';

9 // Notify

10 import { showNotify } from 'vant';

11 import 'vant/es/notify/style';

13 // ImagePreview

14 import { showImagePreview } from 'vant';

15 import 'vant/es/image-preview/style';

你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再

需要重复引入样式了。

安装element-plus

npm install element-plus --save 1

//引入图标 2

npm install @element-plus/icons-vue 3

（1）main.ts中引入

import { createApp } from 'vue' 1

import './style.css' 2

import App from './App.vue' 3

import ElementPlus from 'element-plus' 4

import 'element-plus/dist/index.css' 5

import * as ElementPlusIconsVue from '@element-plus/icons-vue' 6

const app = createApp(App); 7

app.use(ElementPlus).mount('#app') 8

//全局注册图标组件 9

for (const [key, component] of Object.entries(ElementPlusIconsVue)) { 10

app.component(key, component) 11

} 12

（2）使用element plus组件

清除原有Helloworld.vue内容，添加element-plus按钮

6 7 8

运行如下图 ,命令行输入

npm run dev 1

安装pinia

npm i pinia 1

全局引入pinia

import { createApp } from 'vue' 1

import './style.css' 2

import App from './App.vue' 3

import { createPinia } from 'pinia' 4

const app = createApp(App); 5

// 实例化 Pinia 6

const pinia = createPinia() 7

app.use(pinia).mount('#app') 8

安装Eslint(建议)

npm i --save-dev eslint eslint-plugin-vue 1

在根目录创建.eslintrc.js文件

复制代码

在rules可以添加自己的验证规则

module.exports = { 1

root: true, 2

parserOptions: { 3

sourceType: 'module' 4

}, 5

parser: 'vue-eslint-parser', 6

	7		extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
env: { 8

extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended',

'plugin:vue/vue3-recommended'],

env: { 8

browser: true, 9

node: true, 10

es6: true 11

}, 12

rules: { 13

'no-console': 'off', 14

'comma-dangle': [2, 'never'] //禁止使用拖尾逗号 15

} 16

} 17

5.刷新重新运行

npm run dev 1