初始化Vue
Vue的初始化流程
Vue 创建Vue项目
全局安装Vue CLI
- @vue/cli 全局安装到系统，安装之后vue命令将成为全局命令
- 安装后，vue将成为你的全局命令
- 在任意位置运行 vue create vue 都会使用一个全局的CLI 的版本
npm install -g @vue/cli
vue create vue本地安装 + npx 调用
npm init -y:初始化项目，生成package.json
cnpm i -D @vue/cli：将 @vue/cli 作为开发依赖安装到当前项目的 node_modules 中
npx vue@4.5.15 create project:
npx 会优先在当前项目的 node_modules/.bin 中查找 vue 命令
找到后，使用该项目本地安装的 Vue CLI 4.5.15 版本来创建项目
npm init -y # 生成 package.json
cnpm i -D @vue/cli # 本地安装 CLI 到当前项目
npx vue@4.5.15 create project # 使用本地 CLI 创建项目区别
| 维度 | 方式一（全局） | 方式二（本地 + npx） |
|---|---|---|
| 安装范围 | 全局（系统级） | 本地（项目级） |
| 命令调用 | vue create | npx vue create |
| 版本管理 | 所有项目共享一个版本 | 每个项目独立版本 |
| 可移植性 | 差（依赖全局环境） | 好（依赖写在 package.json） |
| 现代趋势 | 逐渐淘汰 | ✅ 官方推荐方向 |
Vue 项目结构介绍
public/：存放静态资源文件的目录。
例如：index.html、静态图片、图标（favicon.ico）、robots.txt 等。
⚠️ 注意：这里的文件不会被 webpack 处理，会原样复制到打包输出目录。src/：项目的源代码目录，所有开发文件基本都在这里。src/assets/：存放需要经过 webpack 处理的静态资源。
例如：图片、字体、CSS 文件、自定义样式等。
✅ 推荐使用方式：import '@/assets/logo.png'或<img src="@/assets/logo.png">src/components/：存放可复用的 Vue 组件。
例如：Header.vue、Sidebar.vue、Button.vue 等。src/views/或src/pages/：存放页面级组件（通常对应路由）。
例如：Home.vue、About.vue、Login.vue。
💡 与components的区别：views是完整页面，components是页面中的一部分。src/router/：存放路由配置。
通常有一个index.js或router.js，定义路由路径与组件的映射关系。
例如：/home→Home.vue，/about→About.vuesrc/store/（可选）：如果使用 Vuex，存放状态管理相关代码。src/services/（可选）：存放 API 请求封装、axios 实例等。src/utils/（可选）：存放工具函数，如日期格式化、权限校验等。
App.vue：根组件，所有其他组件的容器。
通常包含<router-view/>，用于渲染当前路由对应的页面组件。main.js：项目的入口文件。
负责创建 Vue 实例，引入 App.vue、路由、状态管理等，并挂载到 DOM。vue.config.js：可选的配置文件，用于自定义 Vue CLI 的构建行为。
可以配置：- 开发服务器端口（
devServer.port） - 代理（解决开发环境跨域问题）
- 打包输出目录（
outputDir） - 别名（
configureWebpack.resolve.alias） - 公共路径（
publicPath）等
- 开发服务器端口（
Vue3创建方式
创建项目
# 将npm的镜像源换为淘宝镜像源
npm install -g cnpm --registry=https://registry.npmmirror.com
# 创建项目
npm create vue projectName
#Vue 单文件组件 (.vue) ✅ 支持（需要 @vitejs/plugin-vue）
npm install @vitejs/plugin-vue -D版权所有
版权归属：念宇