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