移动端框架搭建
前段时间组队参加公司组织的技术竞赛,使用知识图谱实现了一个自动应答系统。项目使用vue cli-2搭建了一个简单移动端项目框架,包括loader、plugin、flexible布局、UI框架安装,记录一下。
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
# 新建webpack项目
vue init webpack framework_mobile
vue install
# UI框架 vux安装
cnpm install vux --save
# error in ./node_modules/_vux@2.9.4@vux/src/components/v-chart/mixin.js
# vux2必须配合vux-loader使用, 在build/webpack.base.conf.js里参照如下代码进行配置:
const vuxLoader = require('vux-loader')
const webpackConfig = module.exports
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
# loader安装
cnpm install stylus-loader css-loader style-loader less-loader sass-loader --save-dev
cnpm install sass-loader --save
cnpm install node-sass --save
cnpm install less --save
# flexible布局配置
# 1、cnpm install px2rem-loader lib-flexible --save
# 2、在main.js中引入lib-flexible import 'lib-flexible/flexible.js'
# 3、在build下的 utils.js中,找到generateLoaders 方法,添加以下代码
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}
webpack
# 1、页面权限,登录=》获取该用户权限列表=》根据权限列表生成能够访问的菜单=》点击菜单,进入页面
# 2、接口权限,到未登录页,拦截去登录页,登录后去目标页
# axios请求封装 请求前拦截,请求后拦截
# vuex
# 工具函数 utils.js filter
# 全局函数toast、全局组件、全局过滤器
# icon引入 全局样式变量
在main.js中引入import './assets/icon/iconfont.css',这样子就可以在vue项目中使用你下载的svg图标
在vue中可以写<span class="iconfont icon-right"></span>就可以正常显示iconfont图标,修改的时候只需要修改icon-right这个class就可以了,这个class名称可以在font class中看到
#vant引入
npm i vant -S
#自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
{
"plugins": ["transform-vue-jsx", "transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
组件中引入
import { Swipe,SwipeItem,Button } from "vant"
export default {
components:{
[Button.name]:Button,
[Swipe.name]:Swipe,
[SwipeItem.name]:SwipeItem
},
data () {
return {
}
},
methods: {}
}