vue脚手架

### Vue.js 脚手架工具 vue-cli 使用指南 #### 一、Vue CLI 工具概述 Vue CLI 是一个用于快速开发 Vue.js 应用程序的完整系统。它提供了交互式的项目脚手架功能，支持零配置原型开发，并允许通过插件扩展功能[^2]。 #### 二、安装 Node.js 和 npm 在使用 Vue CLI 创建项目之前，需要先安装 Node.js 和 npm。Node.js 提供了运行环境，而 npm 则作为包管理器负责安装和管理依赖项。以下是具体操作： 1. **Linux 版本的 Node.js 安装** - 推荐使用 nvm (Node Version Manager) 来管理不同版本的 Node.js。 - 安装 nvm 后，可通过以下命令安装最新稳定版 Node.js： ```bash nvm install --lts ``` 2. **验证安装** - 确认 Node.js 和 npm 是否成功安装并可用： ```bash node -v && npm -v ``` #### 三、安装 Vue CLI 完成 Node.js 和 npm 的安装后，即可全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 安装完成后，可以通过以下命令确认 Vue CLI 是否正常工作： ```bash vue --version ``` #### 四、创建新项目 利用 Vue CLI 初始化一个新的 Vue 项目非常简单。执行以下命令启动交互式向导： ```bash vue create my-project-name ``` 在此过程中，可以根据提示选择预设选项或手动配置项目特性，例如路由、Vuex 状态管理等功能模块[^3]。 #### 五、运行本地服务器 进入刚刚创建的项目目录，并启动开发服务器： ```bash cd my-project-name npm run serve ``` 这将在浏览器中打开应用，默认地址为 `http://localhost:8080`[^4]。 #### 六、项目结构说明 典型的 Vue CLI 生成的项目会包含如下主要部分： - **src/**：源码目录，存放组件、样式和其他资源文件； - **public/**：静态资产目录； - **package.json**：定义项目的元数据及其依赖关系； - **babel.config.js** 或其他配置文件：指定编译规则等设置。 #### 七、图形化用户界面（GUI） 除了命令行方式外，还可以借助 GUI 更直观地管理和维护项目。只需运行下面这条指令开启可视化模式： ```bash vue ui ``` --- ### 示例代码片段 以下是一个简单的 Vue 组件示例： ```javascript <template> <div id="app"> {{ message }} </div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; } }; </script> <style scoped> #app { color: blue; } </style> ``` ---