node的安裝教程：https://blog.csdn.net/FED_AF/article/details/105747632
一、結構
*/vue
dist
bundle.js（打包輸出的結果，無需手動配置）
src
js
vue
account.vue
login.vue
register.vue
goodslist.vue
index.html
app.vue
main.js
router.js
webpack.config.js
package.json
package-lock.json
二、操作
# 準備環境
*/vue> npm i webpack webpack-cli -g
*/vue> npm init -y
*/vue> npm i webpack webpack-cli -D
*/vue> npm i jquery -D
*/vue> npm i webpack-dev-server -D
*/vue> npm i html-webpack-plugin -D
*/vue> npm i html-loader -D
*/vue> npm i css-loader style-loader -D
*/vue> npm i url-loader -D
*/vue> npm i vue vue-loader vue-template-compiler vue-router -D
# 源代碼的打包構建
*/vue> npx webpack-dev-server
三、文件
*/vue/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
</body>
</html>
*/vue/src/app.vue
<template>
<div>
<p>使用Vue對象的render方法渲染組件{{ msg }}</p>
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">Goodslist</router-link>
<router-view></router-view>
</div>
</template>
<script>
/*
export default向外暴露的成員，可以使用任意的變量來接收
在一個模塊中，export default只允許向外暴露1次
在一個模塊中，可以同時使用export default和export向外暴露成員
export可以向外暴露多個成員，只能使用{}的形式來接收，這種形式，叫做“按需導出”
使用export暴露的成員，必須嚴格按照暴露的名稱接收，除非使用as重命名
test.js：
var info = {
name: 'zs',
age: 20
}
export default info
export var title = '小星星'
export var content = '哈哈哈'
main.js：
import abc {title, content as cnt} from './test.js'
console.log(abc)
console.log(title + cnt)
*/
export default {
data(){ // 注意：組件中的data必須是function
return {
msg: '123'
}
},
methods: {
show(){
console.log('調用了login.vue中的show方法')
}
}
}
</script>
<style>
</style>
*/vue/src/account.vue
<template>
<div>
<p>實現router路由，這是account組件</p>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">註冊</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style scoped>
div{
color: yellow;
}
</style>
*/vue/src/login.vue
<template>
<div>
<p>實現router子路由，這是account的子組件login</p>
</div>
</template>
<script>
</script>
<style scoped>
/*
推薦爲.vue文件中的style開啓scoped屬性
scoped使style的css樣式只能用於當前的組件，可以使組件的樣式不相互污染
*/
div{
color: red;
}
</style>
*/vue/src/register.vue
<template>
<div>
<p>實現router子路由，這是account的子組件register</p>
</div>
</template>
<script>
</script>
<style scoped>
</style>
*/vue/src/goodslist.vue
<template>
<div>
<p>實現router路由，這是goodslist組件</p>
</div>
</template>
<script>
</script>
<style scoped>
</style>
*/vue/src/main.js
// main.js作爲項目的入口文件
// 從es6開始支持下面這種導入方式
import $ from 'jquery'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router.js'
// 1.導入app組件
import app from './app.vue'
// webpack無法打包.vue文件，需要安裝相關的loader：vue-loader、vue-template-compiler
// 1.webpack能夠處理js文件之間的互相依賴關係；
// 2.webpack能夠處理js的兼容問題，把高級的、瀏覽器不識別的語法轉爲低級的、瀏覽器能正常識別的語法
// 手動安裝VueRouter
Vue.use(VueRouter)
$(function(){
$('li:odd').css('background-color', 'cyan')
$('li:even').css('background-color', function() {
return '#' + 'D97634'
})
})
var vm = new Vue({
el: '#app',
render: c => c(app),
router
})
*/vue/src/router.js
import VueRouter from 'vue-router'
import account from './vue/account.vue'
import login from './vue/login.vue'
import register from './vue/register.vue'
import goodslist from './vue/goodslist.vue'
// 創建路由對象
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},
{ path: '/goodslist', component: goodslist }
]
})
// 把路由對象暴露出去
export default router
*/vue/webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
// 入口：表示要使用webpack打包哪個文件
entry: ['./src/main.js', './src/index.html'],
output: {
// 輸出文件名
filename: 'bundle.js',
// 輸出文件路徑
path: resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 1024 * 8,
esModule: false
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
exclude: /\.(html|css|js|jpg|png|gif|vue)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new VueLoaderPlugin()
],
devServer: {
contentBase: resolve(__dirname, 'dist'),
compress: true,
host: '0.0.0.0',
hot: true,
port: 3000
},
mode: 'development'
}