一个 Yii + vue 项目（2）

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": "^0.28.4",
    "file-loader": "^0.11.2",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^12.2.2",
    "vue-router": "^2.7.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.4.2",
    "jquery": "^3.2.1",
    "webpack": "^3.3.0"
  }
}

还有 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: 'dist/',
        /* 文件名 */
        filename: 'build.js'
    },
    module: {
        rules: [
            /* 用来解析vue后缀的文件 */
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
            {
                test: /\.js$/,
                loader: 'babel-loader',
                /* 排除模块安装目录的文件 */
                exclude: /node_modules/
            },
    　　　　{
    　　　　　　test: /\.(png|jpg|gif)$/,
    　　　　　　loader: 'url-loader?limit=8192&name=img/[name].[md5:hash:hex:7].[ext]'
    　　　　},
            {   
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=8192&name=fonts/[name].[md5:hash:hex:7].[ext]'
            }
        ]
    },
    resolve: { 
        alias: { 'vue': 'vue/dist/vue.js' }
    } 
}

我把前端路由写在 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看到
这里写图片描述

一个 Yii + vue 项目（2）

猜你喜欢