vue构建手机端项目的过程

在使用vue构建手机端项目便捷开发过程中，需要在项目中配置常用的插件，常用的依赖。具体构建步骤如下：

构建vue项目

1. 创建vue项目
Vue init webpack 文件名
2. 安装项目依赖
npm install
3. 启动项目
npm run dev

Vue项目默认不会自动打开浏览器，需要在config文件夹下index.js中

将
autoOpenBrowser: false,
修改为
autoOpenBrowser: true,

通过上述步骤一个vue项目构建完成，接下来是安装一些常用的插件。

1.jquery
  cnpm install jquery –save-dev
  webpack.base.conf.js文件中  
  ① const webpack = require("webpack")  
  ② module.exports 最后中添加  
  plugins: [  
    new webpack.optimize.CommonsChunkPlugin('common.js'),  
    new webpack.ProvidePlugin({  
      jQuery: "jquery",  
      $: "jquery"  
    })  
  ]  
  ③ 项目入口文件main.js中引入  
  import $ from 'jquery'  
  Vue.prototype.$ = $  
  使用即可 

2.引入mint-ui
// 安装# 
Vue 1.x
npm install mint-ui@1 –S
# Vue 2.0
npm install mint-ui -S
在main.js中引入
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);
// 按需引入部分组件
import {Cell,Checklist} from 'minu-ui';
import 'mint-ui/lib/style.css'
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

3.安装多语言切换插件
具体配置参考 https://blog.csdn.net/weixin_37861326/article/details/79852256

4.引入全局的urlconfig.js
export default {
  requrl: function () {
    var baseurl = 'request_baseurl'
    return {
      url: {
        name: '名称',
        url: baseurl + 'req'
      },

    }
  }
}

5.引入手机端css适配的通用css
import './assets/css/normalize.css'

至此，通过上述的构建步骤，一个vue项目的手机端项目构建就完成了。本文结。