Vue学习实践笔记（六）

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

*/vue/src/app.vue

*/vue/src/account.vue

*/vue/src/login.vue

*/vue/src/register.vue

*/vue/src/goodslist.vue

*/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'
}