1.0 使用Vite创建Vue3项目

[toc]

总目录

  • 使用Vite2.x VuePress2.x搭建项目与官网
  • 组件
    • Switch组件
    • Button组件
    • Dialog组件
    • Tabs
  • 完善官网
  • 发布代码到npm

技术栈

  • Vite 2.x
  • Vue 3.x
  • Vuex 4.x
  • Vue Router 4
  • typescript 4.x

开发环境搭建

Windows

  • 安装 Node.js 稳定版
    • 进入 https://nodejs.org/zh-cn/ 点击左边的下载按钮即可，下载后将 Node.js 安装到 D:\node 或者 C:\node 然后一路点击「下一步」即可安装
  • 安装 npm
    • 不需要安装，Node.js 自带 npm
  • npm 下载加速
    • 在命令行中运行 npm config set registry https://registry.npm.taobao.org 回车即可
  • 安装 yarn
    • 进入 https://classic.yarnpkg.com/zh-Hans/ 往下滚，点击「下载安装程序」，下载后将 yarn 安装到 D:\yarn 或者 C:\yarn 然后一路点击「下一步」即可安装
  • 安装 VSCode
    • 进入 https://code.visualstudio.com/ 点击 Download 按钮，下载后安装在任意位置即可。

Mac 软件安装

  • 如果你已经安装了 Node.js，且不是通过 homebrew 安装的，请先卸载掉 Node.js
  • 安装 Homebrew 按照这篇教程 安装
  • 安装 Node.js
    • 在终端运行 brew install node 即可，安装完后，根据提示运行其他命令，如果看不懂提示就不要管它。
  • npm 下载加速
    • 在命令行中运行 npm config set registry https://registry.npm.taobao.org 回车即可
  • 安装 Yarn
    • 在终端运行 brew install yarn 即可。
  • 安装 VSCode
    • 进入 https://code.visualstudio.com/ 点击下载按钮即可

Volar - Vue 终极开发神器！

自动安装并直接创建项目vite2.x

  • 任意目录下在终端运行
1

yarn create vite

1
2
3
4

# 旧版本
success Installed "@vitejs/create-app@2.5.2" with binaries:
      - create-app
      - cva
  • 注意vite1.x：
    • yarn global add create-vite-app@1.21.0已弃用
    • yarn create @vitejs/app已弃用

安装完毕后的提示输入项目名称

1
2
3
4

success Installed "create-vite@2.6.2" with binaries:
      - create-vite
      - cva
? Project name:
  • 输入自定义的项目名

提示选择框架

1
2
3
4
5

Select a framework:
  vanille
  vue
  react
  ...
  • 选择第二项vue

提示选择编译版本

1
2
3

Select a variant:
  vue
  vue-ts
  • 选择第二项vue-ts

提示已成功创建项目文件

1
2
3
4
5
6
7
8

Scaffolding project in F:\Documents\jirengu\vue3-demo-2...

Done. Now run:

  cd vue3-demo
  npm install
  npm run dev
  • 按提示进入项目文件夹cd xxx
  • 安装依赖yarn 或 yarn install
  • 运行本地服务yarn dev
  • 按提示访问本地服务器Local: http://localhost:3000/
  • 运行局域网服务器yarn dev --host

全局安装与单独另外创建项目

1
2

yarn global add vite
cva vueel-ui-1
  • Vite 官网文档给出的命令
    • yarn create vite-app <project-name>
    • npm init vite-app <project-name>
  • 等效于 全局安装yarn global add vite@2.5.6后使用命令，创建项目
    • create-app <project-name>
    • 简写为：cva <project-name>
  • 等效于 npx create-app <project-name>
    • npx自动寻找全局安装用到的包

查看版本号

1
2
3
4

# 本地全局
vite -version
# npm上所有版本
npm info vite

如果提示找不到命令，需要将 yarn/bin 目录添加到 系统 path 里

  • 运行 yarn global bin
  • 将得到的目录添加到 path 里

项目文件结构与文件用途

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

vue3-demo-ui
├─ .gitignore
├─ index.html
├─ package.json
├─ public
│  └─ favicon.ico
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  │  └─ HelloWorld.vue
│  ├─ env.d.ts
│  └─ main.ts
├─ tsconfig.json
├─ vite.config.ts
└─ yarn.lock

index.html项目首页

  • 容器节点<div id="app"></div>
  • 脚本引用<script type="module" src="/src/main.ts"></script>
    • type="module"
    • src="/src/main.ts"

main.ts

1
2
3

// import ...;

createApp(App).mount('#app')
  • 引入创建实例的方法import { createApp } from 'vue'
  • 引入组件import App from './App.vue'
  • 引入样式文件import './index.css'
  • 创建实例createApp(App).mount('#app')
    • 接受组件App
    • 挂载到容器节点<div id="app"></div>上

App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<script setup lang="ts">
// ...
// import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

VSCode可以安装Vue 3 Snippets

运行并添加修改组件

添加组件src/components/NewVue.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<template>
  <div>
    第一个组件吧
  </div>
</template>

<script lang="ts">
export default {
  name: 'NewVue'
};
</script>

引入App.vue

1
2
3
4
5
6
7
8
9

<script setup lang="ts">
// ...
// import NewVue from './components/NewVue.vue';
</script>

<template>
  <new-vue></new-vue>
</template>
  • 运行yarn dev

Vue 2 和 Vue 3的区别小结

  • Vue 3的<template>标签支持多个根标签，Vue 2组件内只支持唯一的根标签
  • Vue 3创建实例方法createApp()，Vue 2为new Vue()
  • Vue 3创建实例方法的参数为一个组件createApp(组件)，Vue 2为选项对象new Vue({template, render, ...})

提交代码

初始化

  • VSCode点击git图标>初始化项目
  • 查看.gitignore添加需要排除的目录，比如.vscode
  • 在输入框写提交说明：初始化项目，点击勾号
  • webStorm类似

引入Vue Router 4

将组件映射到路由上，让 Vue Router 知道在哪里渲染它们

  • 和Vue 3.x配套使用的路由器管理模块，用于页面切换
  • Vue Router官网

使用命令行查看 vue-router包 所有版本号

1

npm info vue-router versions

安装正式版vue-router@4.0.11

1
2

# yarn add vue-router@4
yarn add vue-router@4.0.11

初始化vue-router

  • 创建history对象实例
  • 创建router对象实例
  • 使用app.use(router)

先尝试导入import {createWebHashHistory} from 'vue-router';到main.ts中， 创建history实例

  • 输入history时的代码提示
    • createMemoryHistory对应内存型路由
    • createWebHashHistory对应Hash型路由
    • createWebHistory对应History型路由
1
2
3
4
5
6
7

import {createApp} from 'vue';
import App from './App.vue';
import {createWebHashHistory} from 'vue-router';

const history = createWebHashHistory();

createApp(App).mount('#app');
  • 使用createWebHashHistory()方法，创建history实例

创建router实例

  • 引入createRouter()方法
1
2
3
4
5
6
7
8
9

import {createApp} from 'vue';
import App from './App.vue';
import {createWebHashHistory, createRouter} from 'vue-router';

const history = createWebHashHistory();
const router = createRouter();

createApp(App).mount('#app');
  • 由于main.ts会进行类型检查，此时IDE对代码警告
    • const router = createRouter();方法中必须传递一个参数（选项对象）
    • 按住Ctrl点击createRouter()，跳转查看此方法的实现export declare function createRouter(options: RouterOptions): Router;
    • 继续按住Ctrl点击options: RouterOptions，跳转查看RouterOptions的实现export declare interface RouterOptions extends PathParserOptions {...}
    • {...}其中就有{history: RouterHistory; routes:...}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// import ...;

const history = createWebHashHistory();
const router = createRouter({
  history,
  routes: [
    {path: '/', component: NewVue}
  ]
});

createApp(App).mount('#app');
  • 路由列表routes: [...]
  • 添加默认路由{path: '/', component: NewVue}
  • 属性名自动纠错：拼写是routes表示路由对象的集合
  • 根据代码提示自动导入组件：根据component: NewVue导入import NewVue from './components/NewVue.vue';

使main.ts识别*.vue文件

  • 原先需要自行添加shims.vue.d.ts
  • 现在文件目录中默认生成的env.d.ts文件就起到了识别作用
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// /// <reference types="vite/client" />
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

// 等效于原先自行添加的`shims.vue.d.ts`
/*
declare module '*.vue' {
  import {ComponentOptions} from 'vue';
  const componentOptions: ComponentOptions;
  export default componentOptions;
}
*/
  • 如果没有此文件的话，会出现找不到模块 xxx.vue
  • 出现的原因就是TypeScript只能理解.ts文件，无法理解.vue文件
  • 原先的解决办法可搜Vue 3 can not find module
  • 一个可行的方案时创建xxx.d.ts，告诉TS如何识别.vue文件

使用app.use(router)

  • 挂载前使用.use()接口
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// import ...;

const history = createWebHashHistory();
const router = createRouter({
  history,
  routes: [
    {path: '/', component: NewVue}
  ]
});

const app = createApp(App);
app.use(router);
app.mount('#app');

在页面中使用vue-router的链接和展示标签

  • 添加<router-view></router-view> 展示标签
  • 添加<router-link></router-link> 链接标签
  • 添加一个组件Home.vue，和添加路由规则{path: '/xxx', component: Home},

App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<script setup lang="ts">
// ...
// import NewVue from './components/NewVue.vue';
</script>

<template>
  <div>导航栏 |
    <router-link to="/">newVue</router-link> |
    <router-link to="/xxx">Home</router-link> |
  </div>
  <router-view></router-view>
</template>

小结

  • 初始化 vue-router
    • 创建history对象实例
    • 创建router对象实例
    • TypeScript 识别*.vue文件
    • 使用app.use(router)
    • 添加<router-view></router-view>
    • 添加<router-link></router-link>

配置路径别名@

使Vite启动服务时识别别名，正确运行

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';

const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '/@': resolve(__dirname, './src')
    }
  },
});
  • const path = require('path'); 提示报错，按提示安装@types/node
  • yarn add -D @types/node

也可以使用 find

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// import ...

// const path = require('path'); path.resolve(...)
const {resolve} = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '/@',
        replacement: resolve("./src")
      }
    ]
  },
});

页面使用

1

import axios from '/@/axios'
  • 坑：引用.vue文件的时候记得写全后缀

可以去除@前面的斜杠

 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

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';

const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
});

/*

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve("./src")
      }
    ]
  },
});


*/

1

import axios from '@/axios'

参考

使IDE webStorm识别别名，按住ctrl点击路径后正确跳转

搜索google webstorm vite alias @

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

使用CSS预处理SCSS

安装SCSS

1

yarn add -D sass@sass@1.39.2