步驟一：使用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自動轉rem npm 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: 0;-webkit-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0); } // slide-right .slide-right-enter, .slide-right-leave-active {opacity: 0;-webkit-transform: translate3d(50%, 0, 0);transform: translate3d(50%, 0, 0); }.slide-left-active, .slide-right-active{opacity: 0;-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}}

?

暫時就這樣，后面再補充

轉載于:https://www.cnblogs.com/adbg/p/10898589.html

總結

以上是生活随笔為你收集整理的vue移动端立项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。