Vue学习实践笔记（六）

最新推荐文章于 2023-07-07 10:57:43 发布

FED_AF

最新推荐文章于 2023-07-07 10:57:43 发布

阅读量245

点赞数

分类专栏： vue webpack 文章标签： vue webpack

本文链接：https://blog.csdn.net/FED_AF/article/details/106130353

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

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