您的位置：首页 > 编程语言 > PHP开发

一个 Yii + vue 项目（2）

2017-08-23 16:26 288 查看

ok，写前端代码，前端要用vue，同样的自己搭建环境，我的目录是这样的：

贴一下我的 package.json

{
"name": "demo",
"author": "ctaolee@163.com",
"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看到

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航