- Introduction
- 使用 Vue 官方推荐的脚手架工具 Vite 创建项目
- 也可以通过 CDN 使用 Vue 进行传统/原生开发
- Procedure
-
1. 创建空白文件夹作为你的项目开发总目录；后续案例都在此创建
2. 进入项目总目录，在地址栏输入 cmd，打开命令行窗口 CMD，输入以下指令，参照示例命名格式创建项目
npm create vite@latest
3. 选择 Vue 框架 - 使用方向键选择，回车确认
4. 定制 Vue 框架 - 新版本选项提示为 Official Vue Starter ↗；只配置基本的功能，包括路由管理 Vue-router 和状态管理 Pinia；typescript、语法检查等功能暂且不选
5. 项目构建完成后，根据提示逐步执行；因为后期还需要对项目完善开发，请关闭命令行窗口 CMD，使用 Vs Code 打开项目文件夹
6. 安装依赖：按 Ctrl + ~ 打开命令行窗口 CMD，执行安装依赖命令；默认情况下，项目不提供依赖，仅仅在配置文件中说明需要哪些依赖；每次复制或克隆别人项目都要先安装依赖；为什么项目不直接提供依赖？
npm install
7. 开发完善；如：定位到 src → App.vue → <template>，修改 <HelloWorld>中的 msg 为 'hello world' 并保存
8. 运行项目；在命令行窗口 CMD 中执行
npm run dev
9. 按住 CTRL + 单击项目链接，即可打开 Vue + Vite 的欢迎界面；恭喜，您已经打开了 Vue 开发的大门
10. 项目发布；发布后会生产目标文件夹 dist
npm run build
11. 项目预览
npm run preview
- Warning
-
与时俱进；根着官方走，不要死记硬背命令
不要在桌面创建项目
请确保系统相关盘符没有限制读写控制！！！通常不会出现这个问题
项目名称以字母开头，不要大写、不要驼峰命名；如果不知道命名规则，就看示例怎么提示，如 vite-project
项目目录和文件名不要出现中文符号
项目创建完毕后，后续操作请使用 Vs Code 完成：CMD 中，先切换到项目目录，再输入 code . 即可使用 Vs Code 打开项目
对于单页面应用 SPA，直接用 Live Server 打开 HTML 文件可能不会正常工作，因为 Live Server 默认不支持 History 模式，绕过了 Vite 的构建过程和路由配置；可以调整路由模式由
createWebHistory 为 createWebHashHistory
发布后，如果在 当前项目 中预览，需要为 vite.config.js 增加基地址配置，指定为相对路径
base: './'
- node_modules
-
依赖包
生产环境依赖 dependencies：项目上线后，所必须的依赖，如网络请求 Axios
开发环境依赖 devDependencies：开发过程中需要的依赖，发布上线后，不再需要，如 CSS 预处理
- dist
-
项目发布后才有
将其推送到服务器上，项目就进入生产环境的测试环节；经过一系列的调试、重新发布、再上线，项目进入运维环节
- public
-
公共资源，可以直接被项目使用，如图片，不需要解析
项目发布后，这里的资源会 原封不动 的拷贝到发布文件夹 dist
- src
- 开发过程操作最多的目录，您大展身手的舞台
-
assets - 各种资源
components - 组件目录；可以根据业务逻辑再细分
router - 路由目录
.每条路由都对应一个组件 - map each route to a specific component
.定义的路由导出并在 main.js 中使用
stores - 仓库目录
App.vue - 根组件 root component
.特别的 单文件组件 SFC，包括结构 <template>、逻辑 <script>和样式 <style>
.结构 <template>：可以使用原生html标签、vue内置标签和组件标签；组件标签应先在逻辑中引入才能使用
.逻辑 <script>：可以引入其它组件、库、模块和本地样式
import { ref } from 'vue';
import axios from 'axios';
import HelloWorld from '@/components/HelloWorld.vue'
.样式 <style>：定制样式、引入其它样式
@import url(//at.alicdn.com/t/c/font_4090429_8xfmdtpelxu.css);
main.js - 逻辑入口文件；引用并挂载 App.vue
.可以引入样式库和第三方库等；只支持本地样式文件，不支持在线样式文件
.通常只引入主样式文件，然后在主样式文件中在使用其它样式文件，如初始化文件、第三方库等等
import './assets/main.css'
- index.html
-
项目的主页文件
引入样式文件
指定挂载点和挂载的组件
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
- package.json
-
依赖包管理文件；定制命令
区分生产环节依赖 dependencies 和开发环境依赖 devDependencies；更多信息，请访问
Node
由于包的更新和大小等因素，项目分享或提交到代码仓库时，这部分会被忽略
用户拿到项目/代码，第一件事情 是安装依赖；否则项目不能运行
{
"name": "helloworld",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.7",
"font-awesome": "^4.7.0",
"nanoid": "^5.0.6",
"pinia": "^2.3.0",
"swiper": "^11.0.7",
"vue": "^3.4.15",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.3",
"sass": "^1.71.1",
"vite": "^5.0.11"
}
}
为 dev 指定 host 选项，Vite 会暴露一个外部网络可用的 URL。使用这个 URL 在其他设备上访问你的开发服务器
"dev": "vite --host"
甚至指定主机地址，如0.0.0.0，监听所有网络接口，适用于需要特别指定的情况
"dev": "vite --host 0.0.0.0"
指定端口 port
"dev": "vite --host 0.0.0.0 --port 5173"
在大多数情况下，使用 --host 即可满足需求。如果需要更明确的配置，可以使用 --host 0.0.0.0
这里的配置是面向开发环境，不影响生产环境
- vite.config.js
-
配置 Vite；默认配置仅包括插件 plugins 和解析规则 resolve
其它如基地址 base 和服务器 server 的相关配置，如项目打开 open、端口 port、
代理 Proxy 等等，需手动添加
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueDevTools()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
// 以下为手动添加的配置
// 1. 在当前项目中预览发布的 dist，需要将默认的绝对路径调整为相对路径
base: './',
// 2. 网络请求出现跨域时，必须要代理
server: {
open: false, //启动项目自动弹出浏览器预览；默认 false，手动启动
host: '0.0.0.0', //主机；默认 locahost
port: '5173', //端口；默认 5173
proxy: {
// 自建服务器代理
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 腾讯位置服务代理
"/map-api": {
target: "https://apis.map.qq.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/map-api/, ""),
},
}
}
});