【玩转腾讯云】已有laravel 添加vue

原创

无忧366

修改于 2020-04-29 09:07:58

3.6K0

修改于 2020-04-29 09:07:58

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') }];

php artisan serve
npm 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加载优化

安装： 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

参考：

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript