您现在的位置是：网站首页> HTML&JS
Vue项目的创建运行及库
- HTML&JS
- 2026-08-25
- 1932人已阅读
Vue项目的创建运行及库
HBuilderX开发Vue
方法/步骤
首先打开Hbuilder创建一个新项目，如下图所示
Hbuilder如何创建并运行Vue项目
接着模板选择Vue项目，如下图所示
Hbuilder如何创建并运行Vue项目
然后等待一会项目就创建好了，如下图所示
Hbuilder如何创建并运行Vue项目
接着右键单击选择npm run build，如下图所示
Hbuilder如何创建并运行Vue项目
然后继续右键单击选择npm run serve，如下图所示
Hbuilder如何创建并运行Vue项目
接着找底部出现的地址和端口号，如下图所示
Hbuilder如何创建并运行Vue项目
最后在浏览器中输入即可访问vue页面了，如下图所示
Hbuilder如何创建并运行Vue项目
END
总结
1
1，打开Hbuilder创建一个新项目
2，模板选择Vue项目
3，等待一会项目就创建好了
4，右键单击选择npm run build
5，继续右键单击选择npm run serve
6，找底部出现的地址和端口号
7，在浏览器中输入即可访问vue页面了
问题：vue-cli-service 不是内部或者外部命令
解决：忘记 npm install 了:)就是删了node—modules重新安装
vue环境的搭建以及vue项目的创建与启动
vue工程引入element ui
vue引入Axios
HBuilderX开发普通Vue
全局安装 vue cli，vue cli 是一个脚手架工具，用于生成一个基础的vue应用
运行:npm install vue-cli -g
1，打开Hbuilder创建一个新项目
2，模板选择Vue项目
3，等待一会项目就创建好了
4，右键单击选择npm run build
5，继续右键单击选择npm run serve
6，找底部出现的地址和端口号
7，在浏览器中输入即可访问vue页面了
vue模仿抖音
douyin-vue 是一个模仿 抖音|TikTok 的移动端短视频项目。Vue 在移动端的"最佳实践"，媲美原生 App 丝滑流畅的使用体验。使用了最新的 Vue 技术栈，基于 Vue3、Vite5 、Pinia实现。数据保存在项目本地，通过 axios-mock-adapter 库拦截Api 并返回本地json数据，模拟真实后端请求
在线访问
Github Pages: https://dy.ttentau.top/
# 核心结论
**VS Code 本身不能直接编译、运行单个 `.vue` 文件**
Vue‑Official (Volar) 插件**只做语法提示、高亮，不具备编译能力**。浏览器看不懂`<template>`，必须由 **Vite / Webpack** 负责编译。
## 误区澄清
❌ 错误做法：右键 `App.vue` → Live Server
Live Server 只是一个静态网页服务器，**不会编译 vue**，打开会直接显示源码，页面报错，完全不能运行CSDN博...。
# VS Code 里跑 Vue 项目的正规方式（行业标准）
npm create vue@latest 与 npm create vite@latest 创建项目区别
**两个脚手架底层打包器都是 Vite，打包速度完全一样；区别只在于「初始化给你带了多少东西」**
- `npm create vite@latest`：**Vite 官方脚手架**，通用工具，可以创建 Vue/React/Svelte 等项目；生成**极简空白 Vue 项目**，路由、Pinia 全部要你手动装。
- `npm create vue@latest`：**Vue 官方脚手架（create‑vue）**，专门生成 Vue 项目；交互式勾选，可以一次性装好 Router、Pinia、TS、ESLint、Prettier，目录更规范Vue.js。
所以优先用：npm create vue@latest
## 该选哪个？
1. **学习、练习、写 demo（就像刚才登录例子） → `npm create vite@latest`**
从零手动搭建路由，你可以清楚明白每一步原理。
2. **开发正式后台、业务项目 → `npm create vue@latest`**
直接勾选 Router、Pinia，省去一大堆手动安装配置工作，目录规范。
### 前置条件
1. 电脑安装 **Node.js**
2. 用 Vite 创建完整 Vue 项目
npm create vue@latest
cd 你的项目名
npm install
npm run dev
3. 把**整个项目文件夹**拖进 VS Code 打开
4. 在 VS Code 下方内置终端执行 `npm run dev`
- Vite 在后台编译所有`.vue`文件
- 控制台给你一个地址：`http://localhost:5173`
- 在浏览器打开这个链接预览页面
- 修改`.vue`保存 → **秒级热更新**，自动刷新页面
VS Code 在这里只是编辑器；**编译运行工作交给 Vite**。
Vue3 + Vite 要求 Node.js 18.0 或更高版本
## `npm create vue@latest` 这条命令到底干了什么？
这条属于 **npm 临时运行包**，不会把脚手架装到你电脑全局：
1. 临时下载 vue 创建工具
2. 在当前文件夹生成 Vue 项目文件
3. **不会自动安装项目依赖**，生成完项目之后你还要手动执行：
cd 你的项目文件夹名
npm install
`npm install` 才会下载 vue、vite 等所有开发依赖。
## VS‑Code 需要什么？
**VS Code 不用预先装任何东西才能创建项目。**
创建完项目，再打开项目文件夹，建议安装插件提升开发体验（**可选，不是运行必需**）：
- Vue‑Official（Volar）👉 Vue3 语法提示、补全
不装插件项目照样跑，只是写代码没有高亮、智能提示。
# 最简完整步骤（复制依次执行）
# 1. 创建项目
npm create vite@lates my‑vue‑project
# 2. 进入项目目录（命令行提示你项目名字，替换下面名称）
cd my‑vue‑project
# 3. 安装所有依赖
npm install
# 4. 启动开发服务器
npm run dev
启动成功后给你一个 `http://localhost:5173`，浏览器打开即可预览。
目录结构如：
# Vue3 + Vite 跨域完整方案
跨域本质：**浏览器的同源策略**。前端页面 `http://localhost:5173`，后端接口 `http://localhost:8080`，端口不一样就跨域。
分两大类方案：**开发环境（本地调试）**、**生产环境（上线之后）**
## 方案一：Vite 代理（✅开发阶段首选，前端配置，不用改后端代码）
只在本地开发生效；打包上线后失效。
修改项目根目录下 `vite.config.js`
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
// 匹配所有以 /api 开头的请求
'/api': {
target: 'http://127.0.0.1:8080', // 后端真实地址
changeOrigin: true, // 修改请求源，解决跨域核心
rewrite: (path) => path.replace(/^\/api/, '')
// 如果后端接口本身不带/api前缀，就要把/api删掉
// 后端接口是 http://127.0.0.1:8080/user/list，就需要上面rewrite
// 后端接口是 http://127.0.0.1:8080/api/user/list，则去掉rewrite
}
}
}
})
配置完**重启 dev 服务器** `npm run dev`。
然后 Vue 里面请求地址直接写：
axios.get('/api/user/list')
浏览器请求地址显示：`http://localhost:5173/api/user/list`
Vite 内部转发到后端 `http://127.0.0.1:8080/user/list`
原理：Vite 充当**中间服务器**，服务器之间通信浏览器不会拦截，无跨域。
## 方案二：后端开启 CORS（开发、生产都能用，后端解决跨域）
后端直接在响应头允许前端域名访问，**最正规、上线也生效**。
### 1.Node.js (Express) 示例
const cors = require('cors')
app.use(cors())
### 2.SpringBoot Java 后端
方式 1：控制器上加注解
@CrossOrigin(origins = "*")
@RestController
public class TestController{}
方式 2：全局跨域配置（推荐）
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
⚠️上线环境不要用 `*`，指定你前端域名，例如 `http://xxx.com`
### 3.Asp .NET Core
Program.cs
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAll", p =>
{
p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});
});
app.UseCors("AllowAll");
CORS 原理：后端返回响应头 `Access‑Control‑Allow‑Origin`，浏览器看到之后放行。
## 方案三：Nginx 反向代理（适合生产环境）
上线后 Vue 打包 dist 放到 Nginx，Nginx 同时代理后端接口。
server {
listen 80;
server_name yourdomain.com;
# 前端静态页面
location / {
root /dist;
index index.html;
}
#接口转发
location /api/ {
proxy_pass http://127.0.0.1:8080/;
}
}
# 最佳实践组合（行业标准）
1. **本地开发：Vite 代理**，前端配置，不用麻烦后端开跨域
2. **线上部署：Nginx 反向代理**，不依赖 CORS
# 常见踩坑
1. 修改 vite.config.js **必须重启 npm run dev**，配置才生效
2. rewrite 路径问题：后端有没有 `/api` 前缀是最容易出错地方
3. 不要 axios 直接请求后端 `http://127.0.0.1:8080`，开发环境一定要用 `/api`
上一篇：flex布局
下一篇：HTML&JS同行者目录结构