步骤一:使用vue-cli模板创建新项目:vue init webpack ‘vue-test’ 点击查看
步骤二:引入SCSS
npm install sass-loader -D
npm install node-sass -D
组件使用
<style scoped lang=”scss”>执行完上面操作就可以直接在组件使用scss
使用 sass-resources-loader 实现全局变量、方法注入
npm install sass-resources-loader -D
修改build/utils.js
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/scss/index.scss')
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
步骤三:添加fastclick支持,处理移动端click事件300毫秒延迟
npm install fastclick -S 在main.js引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
步骤四:引入淘宝适配lib-flexible
npm install lib-flexible -S 在main.js引入 import ‘lib-flexible’ 步骤五:安装px2rem-loader,px自动转remnpm install px2rem-loader -D修改build/utils.js将px2rem-loader添加到cssLoaders中
const px2remLoader={
loader:'px2rem-loader',
options:{
remUnit:75
}
}
同时,在generateLoaders方法中添加px2remLoader
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
步骤六:打包之后静态资源显示空白及static文件路径报错
1、修改了config/index.js文件build下的assetsPublicPath ‘/’ 改为’./’
2、修改build/utils.js 中,增加一个 pablicPath 的配置
步骤七:模拟app页面切换效果
新建transition.scss
.slide-left-enter-active,
.slide-right-enter-active{
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
// slide-left
.slide-left-enter,
.slide-left-leave-active {
opacity:;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
// slide-right
.slide-right-enter,
.slide-right-leave-active {
opacity:;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}.slide-left-active,
.slide-right-active{
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
在main.js加入
// 用于App.vue状态为前进还是后退
window.addEventListener('popstate', function (e) {
router.isBack = true
}, false)
在App.vue加入,data定义transitionName
<transition :name="transitionName" mode="out-in">
<router-view></router-view>
</transition>
data () {
return {
transitionName: ''
}
},
watch: {
$route (to, from) {
// 切换动画
let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
if (isBack) {
this.transitionName = 'slide-left'
} else {
this.transitionName = 'slide-right'
}
this.$router.isBack = false
}
}
暂时就这样,后面再补充