在使用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项目的手机端项目构建就完成了。本文结。