项目

@Project
使用 Vue 官方推荐的脚手架工具 Vite 创建项目
也可以通过 CDN 使用 Vue 进行传统/原生开发
Procedure
1. 创建空白文件夹作为你的项目开发总目录;后续案例都在此创建
2. 进入项目总目录,在地址栏输入 cmd,打开命令行窗口 CMD,输入以下指令,参照示例命名格式创建项目
npm create vite@latest
3. 选择 Vue 框架 - 使用方向键选择,回车确认
4. 定制 Vue 框架 - 只配置基本的功能,typescript、语法检查等功能暂且不选;后期使用路由管理 Vue-router 和状态管理 Pinia
5. 项目构建完成后,根据提示逐步执行:

.进入项目目录

cd vite_demo

.安装依赖;每次复制或克隆别人项目都要先安装依赖;默认情况下,项目不提供依赖,仅仅在配置文件中说明需要哪些依赖

npm install

.运行项目

npm run dev
6. 按住 CTRL + 单击项目链接,即可打开 Vue + Vite 的欢迎界面;恭喜,您已经打开了 Vue 开发的大门
7. 完善开发
9. 项目发布;发布后会生产目标文件夹 dist;新开一个 Vs Code 打开 dist 并预览效果
npm run build
Warning
不要在桌面创建项目
项目名称以字母开头,不要大写、不要驼峰命名;如果不知道命名规则,就看示例怎么提示,如 vite-project
项目目录和文件名不要出现中文符号
项目创建完毕后,后续操作请使用 Vs Code 完成:CMD 中,切换到项目目录,输入 code . 即可使用 Vs Code打开项目
发布后,如果在当前项目中预览,需要为 vite.config.js 增加基地址配置,指定为相对路径
base: './'
Architecture
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,包括逻辑、结构和样式

.逻辑中可以引入其它组件、库和模块

import { ref } from 'vue';
import axios from 'axios';

.样式中可以引入其它样式

@import url(//at.alicdn.com/t/c/font_4090429_8xfmdtpelxu.css);
main.js - 逻辑入口文件;引用并挂载 App.vue

.可以引入样式库和第三方库等

import './assets/main.css'
import 'font-awesome/css/font-awesome.min.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",
        "swiper": "^11.0.7",
        "vue": "^3.4.15"
    },
    "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;其它如 server、base 的配置,如项目打开、端口、代理等等,需手动添加
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)),
    },
  },
});
在当前项目中预览发布的 dist,需要将默认的绝对路径调整为相对路径
base: './'
网络请求出现跨域时,必须要做 代理 Proxy
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/, '')   //不可以省略 rewrite
        }
    }
}
工程化
配置 package.json
格式化依赖 format
发布前,通常需要对项目进行格式化规范操作
安装格式化依赖
npm install prettier --save-dev
在 package.json 的 script 中配置格式化
对项目所有文件格式化检查
"format": "prettier --write ."
只对 src 下所有文件格式化检查
"format": "prettier --write src/"
执行格式化检查
npm run format
语法检测 Eslint
Homework
[] HelloWorld
创建 - 使用学号创建项目目录
调整 - 删除默认的组件、样式,只保留最基本的结构
开发 - 在根组件 App。vue 中使用一级标题 h1,创建 hello world
调试 - 增加样式,如颜色、布局等或者其他内容并调试
发布 - 将发布的 dist 目录打包压缩,以学号命名,提交到学习通
代码仓库* - 将项目推送到自己的代码仓库
[] 思考
发布后都发生了什么???
跨域是什么???
使用 Tailwind.css样式库创建项目