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

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

<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>