🎊 vue安装（npm和cnpm）

1. 使用 npm 安装 Vue初始化项目（如果还没初始化的话）：代码语言：javascript复制npm init -yphp11 Bytes© 菜鸟-创作你的创作安装 Vue：代码语言：javascript复制npm install vue@nextphp20 Bytes© 菜鸟-创作你的创作安装完成后，在项目中引入即可使用 Vue 3。2. 使用 cnpm 安装 Vue前提：cnpm 是淘宝团队维护的 npm 镜像客户端，速度更快，适合国内用户。

安装 cnpm（如果没安装）：代码语言：javascript复制npm install -g cnpm --registry=https://registry.npmmirror.comphp61 Bytes© 菜鸟-创作你的创作初始化项目（如果还没初始化的话）：代码语言：javascript复制cnpm init -yphp12 Bytes© 菜鸟-创作你的创作安装 Vue：代码语言：javascript复制cnpm install vue@nextphp21 Bytes© 菜鸟-创作你的创作3. 注意事项Vue 3 版本 npm 包名是 vue@next，Vue 2 用 vue。使用 cnpm 安装时，registry 指向淘宝镜像源，速度更快。安装完成后，记得用正确的方式在项目里引入 Vue。好嘞！给你写一个从零开始用 Vite 创建 Vue 3 项目 的完整流程（包含 npm 和 cnpm 安装）以及项目启动步骤。

用 Vite 快速创建 Vue 3 项目（npm 和 cnpm 版）1. 全局安装 create-vite（可选，推荐用 npx/cnpmx）代码语言：javascript复制npm install -g create-vite# 或者cnpm install -g create-vitephp59 Bytes© 菜鸟-创作你的创作2. 创建新项目用 npx（npm 方式）:

代码语言：javascript复制npx create-vite@latest my-vue-app -- --template vuephp51 Bytes© 菜鸟-创作你的创作用 cnpmx（cnpm 方式）:

代码语言：javascript复制cnpmx create-vite@latest my-vue-app -- --template vuephp53 Bytes© 菜鸟-创作你的创作这里 my-vue-app 是项目文件夹名，可以换成你想要的名字。

3. 进入项目目录代码语言：javascript复制cd my-vue-appphp13 Bytes© 菜鸟-创作你的创作4. 安装依赖npm：

代码语言：javascript复制npm installphp11 Bytes© 菜鸟-创作你的创作cnpm：

代码语言：javascript复制cnpm installphp12 Bytes© 菜鸟-创作你的创作5. 启动开发服务器代码语言：javascript复制npm run dev# 或者cnpm run devphp29 Bytes© 菜鸟-创作你的创作6. 打开浏览器访问控制台会显示本地开发服务器地址，通常是：

代码语言：javascript复制http://localhost:5173php21 Bytes© 菜鸟-创作你的创作打开即可看到 Vue 3 项目启动页面。

额外说明Vite 是现代前端构建工具，支持极速热更新，非常适合 Vue 3 开发。--template vue 指定了使用 Vue 模板。如果你想用 Vue 2，需要用其他脚手架（比如 vue-cli）。使用 cnpm 主要是为了加速安装依赖，特别是国内网络环境。好的！下面给你写一个典型 Vue 3 + Vite 项目结构解析和如何新增组件、添加 Vue Router 和 Pinia（状态管理）的示范。

一、Vite + Vue3 项目目录结构示例代码语言：javascript复制my-vue-app/├── index.html # 入口 HTML├── package.json # npm 配置文件├── vite.config.js # Vite 配置文件├── node_modules/ # 依赖包├── public/ # 静态资源└── src/ ├── main.js # 入口 JS，挂载 Vue ├── App.vue # 根组件 ├── assets/ # 图片、样式等资源 ├── components/ # 组件目录 │ └── HelloWorld.vue ├── router/ # 路由相关 │ └── index.js └── stores/ # Pinia 状态管理 └── index.jsphp480 Bytes© 菜鸟-创作你的创作二、添加新组件示例在 src/components 目录下创建 MyComponent.vue：

代码语言：javascript复制php149 Bytes© 菜鸟-创作你的创作然后在 App.vue 或其他组件里引入：

代码语言：javascript复制php140 Bytes© 菜鸟-创作你的创作三、添加 Vue Router安装：代码语言：javascript复制npm install vue-router@4# 或 cnpm install vue-router@4php54 Bytes© 菜鸟-创作你的创作创建路由配置 src/router/index.js：代码语言：javascript复制import { createRouter, createWebHistory } from 'vue-router'import Home from '../components/Home.vue'import About from '../components/About.vue'const routes = [ { path: '/', component: Home }, { path: '/about', component: About }]const router = createRouter({ history: createWebHistory(), routes,})export default routerphp336 Bytes© 菜鸟-创作你的创作在 src/main.js 中挂载路由：代码语言：javascript复制import { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)app.mount('#app')php151 Bytes© 菜鸟-创作你的创作使用 显示路由组件：修改 App.vue：

代码语言：javascript复制php52 Bytes© 菜鸟-创作你的创作四、添加 Pinia 状态管理安装：代码语言：javascript复制npm install pinia# 或 cnpm install piniaphp40 Bytes© 菜鸟-创作你的创作创建状态管理 src/stores/index.js：代码语言：javascript复制import { defineStore } from 'pinia'export const useMainStore = defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } }})php186 Bytes© 菜鸟-创作你的创作在 main.js 挂载 Pinia：代码语言：javascript复制import { createApp } from 'vue'import App from './App.vue'import router from './router'import { createPinia } from 'pinia'const app = createApp(App)app.use(router)app.use(createPinia())app.mount('#app')php210 Bytes© 菜鸟-创作你的创作组件中使用状态：代码语言：javascript复制php216 Bytes© 菜鸟-创作你的创作https://www.52runoob.com/archives/5468