移动端框架搭建
A Vue.js project
# 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 and docs for vue-loader.
vue init webpack framework_mobile vue install
cnpm install vux --save
error in ./node_modules/_vux@2.9.4@vux/src/components/v-chart/mixin.js
const vuxLoader = require('vux-loader') const webpackConfig = module.exports
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
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
import 'lib-flexible/flexible.js'
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
在main.js中引入import './assets/icon/iconfont.css',这样子就可以在vue项目中使用你下载的svg图标
在vue中可以写就可以正常显示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: {} }