新手初次搭建這個環境有點困難,可能會遇到很對問題,所以寫一篇詳細的搭建過程分享
本教程例子可到GitHub 上下載 Laravel5.5-Vue-Element-ui-Vux
1. compose和node的安裝
這兩個的安裝網上教程多的是,大家可自行下載安裝。
2. Laravel5.5 安裝
首先進入項目搭建目錄,在控制檯中輸入
composer global require "laravel/installer" //安裝laravel安裝器
laravel new test //創建laravel項目 test爲項目名稱
當安裝完成後會顯示
這裏我們需要配置一下虛擬主機,配置虛擬主機的教程可以在網上搜索。
3. Vue的安裝
Laravel 默認是帶vue環境的,所以我們可以非常方便的搭建使用
安裝的話我們直接進入項目的根目錄執行 npm install
,等待一段時間就OK了
然後,我們來寫一些代碼來測試下,我們進入 resources\assets
目錄後會發現,laravel默認帶了一個vue的例子,
我們可以看一下app.js的代碼,發現他是引入了vue,然後註冊了一個組件,也就時Example.vue , Example.vue 中輸出兩句話,這是一個完整的組件,我們可以直接使用。
我們找到resources\views\welcome.blade.php
文件,將其修改爲下面的代碼,也就是吧原來的HTML刪了,添加一個id爲app的div,在其中使用app.js 中註冊的組件,需要注意的就是要添加crsf-Token的驗證meta標籤,和引入 app.js 文件,這個js文件也可以去根目錄中的 webpack.mix.js 文集中修改。
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script src="/js/app.js"></script>
</html>
然後,我們npm run dev
一下然後到瀏覽器中看一下,我配置的虛擬主機訪問地址是 vuxtest.cn
npm編譯好之後我們在瀏覽器查看發現已經安裝好了。
4. Element-ui 安裝
我們可以去 Element-ui 官方文檔 查看安裝教程,也就是簡單的npm 安裝一下
npm i element-ui -S //安裝Element-ui
然後在 resources\assets\js\app.js
中引入Element-ui組件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
修改Example.vue 文件,使用Element-ui的組件,修改爲
<template>
<div>
<el-radio class="radio" v-model="radio" label="1">備選項</el-radio>
<el-radio class="radio" v-model="radio" label="2">備選項</el-radio>
</div>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
最後 npm run dev
編譯一下,到瀏覽器查看效果
5. Vux的安裝
我們首先安裝Vux必要的組件
npm install vux --save //安裝vux
npm install vux-loader --save
npm install less-loader --save
安裝完成後我們還需要將 webpack.config.js
文件提出來
cp node_modules/laravel-mix/setup/webpack.config.js ./
然後打開webpack.config.js 文件,向其中添加一些代碼,然後將第8行和第24行的路徑修改爲 ./node_modules/laravel-mix/src/index
和 ./node_modules/laravel-mix/src/builder/WebpackConfig
附加代碼:
/**
* As our first step, we'll pull in the user's webpack.mix.js
* file. Based on what the user requests in that file,
* a generic config object will be constructed for us.
*/
require('./node_modules/laravel-mix/src/index'); // 修改路徑
require(Mix.paths.mix());
/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/
Mix.dispatch('init', Mix);
/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/
let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig'); //修改路徑
module.exports = new WebpackConfig().build();
/**
*添加的內容
*================================================
*/
const vuxLoader = require('vux-loader')
const webpackConfig = module.exports // 原來的 module.exports 代碼賦值給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
修改package.json文件的config文件路徑 爲根目錄的webpack.config.js文件
修改爲
然後我們去Vux中找一個demo 然後修改 Example.vue文件爲
<template>
<div>
<group>
<cell title="Total" value="¥1024"></cell>
<cell-form-preview :list="list"></cell-form-preview>
</group>
</div>
</template>
<script>
import { CellFormPreview, Group, Cell } from 'vux'
export default {
components: {
CellFormPreview,
Group,
Cell
},
data () {
return {
list: [{
label: 'Apple',
value: '3.29'
}, {
label: 'Banana',
value: '1.04'
}, {
label: 'Fish',
value: '8.00'
}]
}
}
}
</script>
然後 npm run dev
編譯後刷新瀏覽器即可看到
如果有什麼不懂得,歡迎留言提問
6. Vue-router 的使用
這裏擴展Vue-router的使用,首先,我們要安裝vue-router組件
npm install vue-router --save
然後我們在 resources\assets\js
目錄下創建 router.js
和 App.vue
文件
在App.vue文件中添加 模板代碼:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script scoped>
export default {
data(){
return {}
},
components: {
},
computed: {},
methods: {
},
mounted() {
},
}
</script>
在 router.js
文件中添加:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
name:"test",
path:'/',
component: resolve =>void(require(['./components/Example.vue'], resolve))
},
]
})
然後我們來修改 app.js
文件,我們需要引入剛纔的路由文件,在Vue創建時添加路由和App.vue,
然後我們訪問瀏覽器。
到這裏,我們的路由配置就完成了,如果需要添加更多的路由,可以在router.js 中添加一條路由,然後路徑指向相應的組件就ok了。
對應相應的文件
訪問 vuxtest.cn/#/test
即出現 Test.vue 組件
有問題歡迎隨時提問!!!