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看到