从零开始搭建Vue脚手架

### 从零配置 Vue CLI 脚手架工具 要从零开始搭建 Vue.js 开发环境并配置 Vue CLI 脚手架工具，以下是详细的说明： #### 环境准备 确保本地已安装 Node.js 和 npm。可以通过以下命令验证版本号： ```bash node -v && npm -v ``` 如果未安装，则需先下载并安装最新稳定版的 Node.js[^1]。 #### 全局安装 Vue CLI 工具 通过 npm 命令全局安装 Vue CLI 工具： ```bash npm install -g @vue/cli ``` 此操作完成后，可以运行 `vue --version` 来确认 Vue CLI 是否成功安装[^3]。 #### 创建首个 Vue 项目 使用 Vue CLI 初始化一个新的 Vue 项目： ```bash vue create my-vue-project ``` 在交互式提示中可以选择默认配置或者手动选择特性（如 Router、Vuex 等）。完成初始化后进入项目文件夹： ```bash cd my-vue-project ``` #### 启动开发服务器 启动内置的开发服务器来预览项目效果： ```bash npm run serve ``` 访问浏览器中的地址（通常是 http://localhost:8080/），即可查看到初始页面[^2]。 #### 集成 Axios 进行 HTTP 请求 为了实现数据请求功能，可以在项目中集成 Axios 库： 1. **安装 Axios** 使用 npm 或 yarn 安装 Axios： ```bash npm install axios ``` 2. **引入 Axios** 打开 `src/main.js` 文件，在其中导入 Axios 并设置基础路径或其他选项： ```javascript import axios from 'axios'; axios.defaults.baseURL = 'https://api.example.com'; ``` 3. **使用 Axios** 在组件内部调用 API 接口获取远程数据： ```javascript export default { data() { return { items: [] }; }, created() { axios.get('/data') .then(response => this.items = response.data) .catch(error => console.error('Error fetching data:', error)); } }; ``` #### 部署生产环境 当开发完毕需要部署至线上时，可执行以下命令打包应用： ```bash npm run build ``` 这会生成静态资源存放在 `dist` 文件夹下，随后可通过 Nginx、Apache 或其他 Web 服务托管这些文件。 ---