一個 Yii + vue 專案（2）
阿新 • • 發佈：2018-12-26
ok，寫前端程式碼，前端要用vue，同樣的自己搭建環境，我的目錄是這樣的：
貼一下我的 package.json
{
"name": "demo",
"author": "[email protected]",
"dependencies": {
"vue": "^2.4.2"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"css-loader 還有 webpack.config.js
/* 引入操作路徑模組和webpack */
var path = require('path');
var webpack = require('webpack');
module.exports = {
/* 輸入檔案 */
entry: './src/main.js',
output: {
/* 輸出目錄，沒有則新建 */
path: path.resolve(__dirname, './dist'),
/* 靜態目錄，可以直接從這裡取檔案 */
publicPath 我把前端路由寫在 router/ 中，src 放資原始檔，src/assets/ 放靜態資源， src/components/ 放元件。
貼一下 src/main.js
import Vue from 'vue'
import App from './app.vue'
import router from '../router/default'
new Vue({
el: '#app',
router,
render: h=>h(App)
})router/default.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
]
})
src/app.vue
<template>
<div id="app">
Hello World
</div>
</template>至於 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title></title>
</head>
<body>
<div id="app">
</div>
<script src="dist/build.js"></script>
</body>
</html>ok，打包完後開啟index.html看到
