如何基于vue-cli3.0构建功能完善的移动端架子

基于vue-cli3.0构建功能完善的移动端架子，主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局 跨域设置 eslint设置 cdn引入 路由设计、登录拦截 axios、api 设计 vuex状态管理 项目地址: vue-cli3-H5 demo地址: https://zhouyupeng.github.io/vuecli3H5/#/ webpack 打包扩展 vue-cli3.*后目录结构大改，去除了以往的build,config文件夹，要实 在构建功能完善的移动端应用时，Vue CLI 3.0 提供了一个高效且便捷的脚手架，用于快速初始化项目。本篇文章将详细讲解如何利用 Vue CLI 3.0 创建一个包含各种功能的移动端项目，包括 webpack 配置扩展、CSS 处理（Sass 支持、Normalize.css 和变量文件）、vw、rem 布局、跨域设置、ESLint 规范、CDN 引入、路由设计与登录拦截、Axios 以及 API 设计和Vuex 状态管理。 我们需要安装 Vue CLI 3.0。通过全局安装 `@vue/cli`，可以创建新的项目： ```bash npm install -g @vue/cli ``` 创建项目时，使用 `vue create` 命令，例如： ```bash vue create my-mobile-app ``` Vue CLI 3.0 删除了旧版中的 `build` 和 `config` 目录，取而代之的是在项目根目录下增加 `vue.config.js` 文件来实现自定义配置。例如，若要启用 Sass 支持并引入全局样式，`vue.config.js` 可以这样配置： ```javascript module.exports = { css: { extract: true, sourceMap: false, modules: false, loaderOptions: { sass: { data: ` @import "src/assets/css/_mixin.scss"; @import "src/assets/css/_variables.scss"; `, }, }, }, }; ``` 接下来，我们可以处理移动端的响应式布局。这里采用网易新闻的vw、rem布局策略。设置 HTML 的 `font-size`，然后根据屏幕宽度设置不同断点的字体大小。例如： ```css html { font-size: 13.33333vw; } /* ...各断点媒体查询... */ ``` 对于跨域问题，可以在 `vue.config.js` 中配置代理，允许开发环境中通过API请求数据： ```javascript module.exports = { devServer: { proxy: 'http://api.example.com', }, }; ``` 为了保持代码质量，我们还可以使用 ESLint 进行代码规范检查。在项目中安装 ESLint 和相关插件，然后在 `.eslintrc.js` 或 `.eslintrc.yaml` 文件中定义规则。 CDN 引入可以减少打包后的体积。在 `public/index.html` 文件中添加引用外部库的 `<script>` 和 `<link>` 标签。 对于路由设计，可以使用 Vue Router。创建 `src/router/index.js` 文件，定义路由模块和守卫，实现登录拦截。 使用 Axios 进行 API 请求，安装 Axios 并在项目中导入。在组件中调用 Axios 方法与服务器交互。 对于复杂状态管理，可以使用 Vuex。创建 `src/store` 目录，定义 store 模块，包括 state、mutations、actions 和 getters。 总结，基于 Vue CLI 3.0 构建的移动端应用具备了现代前端开发所需的多种功能。从基础配置到高级特性，Vue CLI 3.0 提供了强大的工具链，帮助开发者快速构建高质量的移动应用。通过理解并实践这些知识点，可以大大提高开发效率并提升项目的可维护性。