一、vue框架搭建(2.0+)
1、npm install --global vue-cli // 安装vue-cli
2、vue init webpack myapp // 创建我的项目myapp项目名称
3、选择自己需要的配置,一路回车即可,选择Y安装,n不安装
? Project name myapp
? Project description A Vue.js project
? Author sunluyi <934353403@qq.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes //是否安装路由 :Y
? Use ESLint to lint your code? No //是否需要ESLint :n
? Set up unit tests No //是否需要单元测试 :n
? Setup e2e tests with Nightwatch? No //e2e测试 :n
? Should we run `npm install` for you after the project has been created? (recommended) npm //npm安装
4、安装过程大概需要三分钟,成功后提示:Project initialization finished!
5、cd myapp //进入项目目录
6、npm run dev //启动项目
二、插件安装
1、如果需要vant-ui : npm i vant -S
//main.js添加配置引入全部组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
2、自动按需引入组件 (推荐) : npm i babel-plugin-import -D
修改.babelrc文件(修改后需要重新npm run dev)
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
//main.js按需引入
import {
Button,//按钮组件
} from 'vant';
Vue.use(Button);
3、如果需要axios : npm install axios(如何引入配置axios请参考我的另一篇文章axios封装)
4、如果需要vuex : npm install vuex --save
src目录下 新建store/store.js
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
},
mutations: {
},
getters: {
},
})
//main.js引入
import {store} from './store/store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
5、如果需要使用less : npm i less less-loader -S
6、移动端rem适配 :
使用vant官方推荐适配方案 :
npm i lib-flexible
npm i postcss-pxtorem
//main.js引入
import 'lib-flexible';
//修改.postcssrc.js(修改后需要重新npm run dev)
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
//配置不生效需要重新npm run dev
vant官方rem适配方案,如果你的设计稿是750px,那么宽度100% == 375px
样式中可直接定义
div{
width:375px; // 等同于width:100%
}
如果你需要在less文件中定义全局变量,请参考我的另一篇文章sass-resources-loader 全局注册 Sass/Less 变量