DataV在vue cli上的安装和自定义修改样式

### 使用 Vue CLI 自定义创建项目的教程 #### 安装 Vue CLI 为了能够使用 Vue CLI 创建项目，首先需要全局安装 Vue CLI 工具。可以通过以下命令完成安装： ```bash npm install -g @vue/cli ``` 或者使用 `yarn` 进行安装： ```bash yarn global add @vue/cli ``` 确认安装成功后可以运行以下命令查看版本号： ```bash vue --version ``` 如果返回的是 Vue CLI 的具体版本号，则说明安装成功。 --- #### 初始化项目 通过 Vue CLI 创建一个新的 Vue 项目时，可以选择预设模板或手动配置功能模块。以下是具体的步骤： 1. **执行初始化命令** 执行以下命令来启动项目创建流程： ```bash vue create project-name ``` 将 `project-name` 替换为你希望的项目名称，例如 `hm-exp-mobile`[^1]。 2. **选择自定义模式** 当提示选择预设方案时，输入键盘上的方向键并选择 `Manually select features` 来进入自定义配置界面[^2]。 --- #### 配置功能模块 在自定义模式下，可以根据需求选择不同的功能模块。以下是常见的选项及其作用： - **Babel**: JavaScript 编译器，用于支持现代 ES 特性和兼容旧版浏览器。 - **TypeScript**: 添加 TypeScript 支持以实现静态类型检查。 - **Progressive Web App (PWA)**: 提供离线访问能力和其他 PWA 功能。 - **Router**: 增加官方路由插件 Vue Router，用于管理单页面应用中的导航。 - **Vuex**: 状态管理库 Vuex，适用于复杂状态的应用程序。 - **CSS Pre-processors**: 如 Sass/SCSS、Less 或 Stylus，提供更强大的 CSS 开发体验。 - **Linter / Formatter**: ESLint 和其他工具帮助保持代码风格一致性。 通过上下箭头选择所需的功能，并按下空格键进行勾选。完成后按 Enter 键继续[^3]。 --- #### 路由和样式处理器设置 对于某些特定功能（如 Router 和 CSS 处理器），会进一步询问详细的配置方式。例如： - 对于 **Router**，可以选择是否采用 History 模式替代默认的 Hash 模式。 - 对于 **CSS Pre-processors**，可以选择喜欢的语言（Sass、Stylus 等）以及是否自动导入变量文件。 根据实际开发需求做出合理的选择即可。 --- #### 构建与运行 当所有配置完成后，Vue CLI 会自动安装依赖项并将初始结构搭建完毕。之后可通过以下命令启动本地服务器进行测试： ```bash npm run serve ``` 这将在终端显示一个 URL 地址，默认为 `http://localhost:8080`，打开浏览器访问该地址即可看到新创建的 Vue 应用正在运行。 --- ### 总结 以上即为利用 Vue CLI 自定义创建项目的完整过程。从环境准备到最终构建部署，每一步都提供了高度灵活性以便满足不同场景下的开发需求^。 ```javascript // 示例：简单的 Vue 组件 <template> <div id="app"> {{ message }} </div> </template> <script> export default { data() { return { message: 'Hello from custom Vue CLI setup!' }; } }; </script> <style lang="scss"> #app { color: blue; } </style> ```