Vue 移动端项目创建

前言

• 移动端我们一般通过Vue脚手架手动自定义创建项目，

• 只需要Node环境我们就可以通过npm下载Vue脚手架，通过命令创建项目。

npm下载脚手架

npm install -g @vue/cli

执行创建命令

vue create geek-client-mobile

选中自定义创建

选择Vue版本，依赖Babel降级ES6语法，依赖vue-router，依赖vuex，使用css预处理器，使用代码风格校验（空格选择）。

选择vue2.0版本

是否使用历史模式API，输入 n

选择less这种css预处理器

选择 通用语法风格配置

语法风格校验的时机，保存代码校验，提交代码校验且自动修复。

选择使用不同的配置文件对于所依赖工具

是否记录此次操作记录，输入 n

最后把下载好的项目下包启动就可以了。

1.项目文件基本删除

• 删除项目创建时默认生成的一些文件

• 来到 views 文件夹，删除里面默认的 about.vue 和 home.vue

• 来到 App.vue 删除里面的默认代码，使用一个空白的vue结构（快捷键： < ）

• 来到 assets 文件夹，删掉里面默认的logo图片

• 来到 components 文件夹，删掉里面默认的 helloword.vue

• 来到 router/index.js 里，把导入的home和默认的路由规则删掉

2.基本全局样式

• 来到 src 新建 styles 文件夹，再新建 base.less 文件，里面写一些基本的全局样式

*{
    font-size: 14px;
    margin: 0;
    padding: 0;
}

• 来到 main.js 导入这个全局样式

• 安装使用normalize.css

  • 下载 npm i normalize.css

  • 在mian.js导入 import 'normalize.css'

3.vant组件按需导入

• 因为本项目会使用 vant 进行布局，所以我们要导入vant，可以使用 按需导入vant的方式来节约体积

• vant-vue2.x官网： Vant 2 - Mobile UI Components built on Vue

• 注意：vant官网已经升级了，指定的默认版本为 vue3.x的版本，所以要下载vue2版本的vant，要使用如下代码

npm i vant@latest-v2 -S

• 需要下载自动按需导入依赖的插件 babel-plugin-import

npm i babel-plugin-import -D

• 来到 babel.config.js 文件，复制如下配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

---

总结：

经过这一趟流程下来相信你也对 Vue 移动端项目创建 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕