package.json

"devDependencies": { "axios": "^0.17", "bootstrap-sass": "^3.3.7", "browser-sync": "^2.26.7", "browser-sync-webpack-plugin": "^2.2.2", "cross-env": "^5.1", "jquery": "^3.2", "laravel-elixir-livereload": "^1.1.6", "laravel-elixir-vue-2": "^0.3.0", "laravel-elixir-webpack-official": "^1.0.10", "laravel-mix": "^1.0", "lodash": "^4.17.4", "node-sass": "^4.7.2", "vue": "^2.5.7"  }, "dependencies": { "css-loader": "^0.28.9", "gulp": "^3.9.1", "iview": "^2.9.2", "js-cookie": "^2.2.0", "laravel-elixir": "^6.0.0-18", "laravel-elixir-compress": "^1.0.2", "less": "^3.0.0", "less-loader": "^4.0.5", "particles.js": "^2.0.0", "vue-i18n": "^7.4.2", "vue-router": "^3.0.1", "vuex": "^3.1.2"  }

gulpfile.js

const elixir = require('laravel-elixir');require('laravel-elixir-webpack-official');require('laravel-elixir-vue-2')elixir((mix) => { mix.sass('app.scss')       .webpack('app.js');});

webpack.mix.js

let mix = require('laravel-mix');mix.js('resources/assets/js/app.js', 'public/js')   .sass('resources/assets/sass/app.scss', 'public/css');mix.browserSync({ proxy: 'localhost:8000'});

resources/assets/js文件夾下創建page文件+api.js+app.js+routes.js

app.js

require('./bootstrap');window.Vue = require('vue');import VueRouter from 'vue-router';Vue.use(VueRouter);import store from './store/'; // vuex 數據存儲所需對象import routes from './routes';    // 路由配置文件// 實例化路由const router = new VueRouter({ routes})var vm = new Vue({ store, router}).$mount('#app');

routes.js

export default[    { path: '', redirect: '/index' },    { path: '/index', component: require('./page/App.vue') },    { path: '/list', component: require('./page/List.vue') },    { path: '/detail/:id', component: require('./page/Detail.vue') }];

a

php artisan servenpm run watch

Error: Can't resolve 'vue-route' in

cnpm install --save vue-route

Error: Can't resolve 'vuex' in

cnpm install --save vuex

成功之后

安裝element-ui

cnpm i element-ui -S

安裝vant

cnpm i vant -S

安裝 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

npm i babel-plugin-import -D

在根目錄下創建.babelrc文件,并在其中配置plugins(插件)

"plugins": [    "transform-vue-jsx",     "transform-runtime",    ["import", [{ "libraryName": "vant", "style": true }]]  ],

<script>

import { Loading } from 'vant'

export default {

components: {

[Loading.name]: Loading

}

}

</script>

Vant UI 組件庫做rem適配

px單位轉化為rem,借助postcss-pxtorem插件

cnpm install autoprefixer postcss-pxtorem --save-dev

vue.config.js文件

const autoprefixer = require('autoprefixer')const pxtorem = require('postcss-pxtorem')module.exports = {  css: {    loaderOptions: {      postcss: {        plugins: [          autoprefixer(),          pxtorem({            rootValue: 37.5,            propList: ['*'],            // 該項僅在使用 Circle 組件時需要            // 原因參見 https://github.com/youzan/vant/issues/1948            selectorBlackList: ['van-circle__layer']          })        ]      }    }  }}

rem適配

rem適配文檔上建議使用lib-flexible,flexible適配的原理是物理像素與邏輯像素的相互轉化:物理像素px = window.screen.width(邏輯像素pt) * window.devicePixelRatio

cnpm i -S amfe-flexible

app.js引入

import 'amfe-flexible'

項目中使用

寬度為750px的設計圖,由于rootValue: 37.5為基準,在寫css時候設計圖上文字大小多少像素就寫多少像素即可

cnpm install axios --save

第二

laravel-mix使用postcss-px-to-viewport

在webpack.mix.js中添加

mix.js('resources/assets/js/app.js', 'public/js') .postCss('resources/assets/css/app.css', 'public/css') .options({    postCss: [ require('postcss-px-to-viewport')    ]});

npm run watch

會報錯缺少插件,類似這種安裝

cnpm install postcss-viewport-units --save-dev

vue加載優化

1. 安裝:?cnpm install --save-dev webpack-bundle-analyzer

webpack.mix.js中mix.webpackConfig({ plugins: [ new BundleAnalyzerPlugin(),  ],}).js('resources/assets/js/app.js', 'public/js')  .sass('resources/assets/sass/app.scss', 'public/css');

運行

npm run dev

參考:

1. https://learnku.com/articles/9054/laravel55-vue-development-single-page-application
2. https://learnku.com/articles/23748
3. https://blog.csdn.net/ansu2009/article/details/80682920
4. https://blog.csdn.net/weixin_30242907/article/details/101909189