尝试Vue环境搭建

### Vue 开发环境搭建教程 #### 1. 环境准备 在开始搭建 Vue 开发环境之前，需要确保本地已经安装了 Node.js 和 npm。可以通过以下命令检查是否已安装： ```bash node -v npm -v ``` 如果未安装或版本过低，请访问 [Node.js 官方网站](https://nodejs.org/) 下载并安装最新稳定版[^2]。 #### 2. 全局安装 Vue CLI 工具 Vue CLI 是一个官方提供的脚手架工具，用于快速生成 Vue 项目结构。可以通过以下命令全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 安装完成后，可以通过以下命令验证是否安装成功： ```bash vue --version ``` #### 3. 创建 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目： ```bash vue create my-vue-app ``` 运行上述命令后，系统会提示选择预设配置。可以选择手动配置（Manually select features）来添加所需的功能模块，例如 Router、Vuex 等[^3]。 #### 4. 运行开发服务器 进入项目目录并启动开发服务器： ```bash cd my-vue-app npm run serve ``` 启动成功后，会在终端输出类似以下内容： ``` App running at: - Local: http://localhost:8080/ - Network: http://192.168.x.x:8080/ ``` 打开浏览器访问 `http://localhost:8080/` 即可查看运行中的 Vue 应用程序[^4]。 #### 5. 使用 CDN 引入 Vue（可选） 如果不想通过 npm 安装 Vue，也可以直接通过 CDN 引入 Vue。例如： ```html <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const { createApp } = Vue; createApp({ data() { return { message: 'Hello Vue!' }; } }).mount('#app'); </script> ``` 这种方式适合简单的演示或学习场景，但对于复杂项目不推荐使用[^1]。 #### 6. 安装和卸载 Vue 组件 如果需要安装第三方 Vue 组件，可以使用 npm 或 yarn 进行安装。例如： ```bash npm install vue-router vuex ``` 卸载组件时可以使用以下命令： ```bash npm uninstall vue-router vuex ``` ### 注意事项 - 在生产环境中，建议使用 Webpack 或 Vite 构建工具优化项目性能。 - 如果遇到依赖冲突问题，可以尝试清理缓存并重新安装依赖： ```bash npm cache clean --force npm install ```