Vue入门实战01:搭建webpack+vue开发环境

最近用webpack+vue构建了一个移动端项目,摸石头过河遇到了不少坑,看这段时间也没有更新博客了,就记录一下自己在这个项目中遇到的一些技术点,分享出来。

本篇主要分享一下利用webpack搭建vue开发环境,前提电脑上须安装好了nodejs

1.搭建开发目录

新建一项目目录myVue,进入该目录新建一个app和一个node_modules文件夹;

进入app文件夹,新建pages目录用于存放页面,新建一个component目录存放组件,新建conmmon目录用于存放公共资源;

app里面建一个入口文件,命名为app.js和一个入口页面app.vue,以及一个index.html文件

myVue目录下新建webpack.config.js启动文件

 

建成的文件目录如下图所示:

2.配置启动文件

打开webpack.config.js文件,配置和说明如下:

//引入webpack插件
var webpack = require("webpack");
// 生成HTML插件
var html = require("html-webpack-plugin");
// 删除文件插件(后面用到删除www文件夹)
var clean = require("clean-webpack-plugin");
//用到的模块
module.exports = {
	//入口文件
	entry:"./app/app.js",
	//输出
	output:{
		//输出地址,会自动创建文件夹www
		path:__dirname+"/www",
		//输出命名
		filename:"bundle.js"
	},
	//用到的模块,基本上常用的就是这几个
	module:{
		loaders:[
			{
				//css打包,使用正则表达式识别样式文件,常用用到了style-loader、css-loader、less-loader模块
				test:/.css$/,
				loader:"style-loader!css-loader!less-loader"
			},
			{
				//图片打包,limit限制打包的图片大小和图片放到imges文件下使用原名字,使用4位的hash值防止命名相同而冲突,使用原来的扩展名
				test:/.(png|jpe?g|gif)$/,
				loader:"url-loader?limit=1000&name=images/[name].[hash:4].[ext]"
			},
			{
				//vue文件打包
				test:/.vue$/,
				loader:"vue-loader"
			},
			{
//字体打包
				test:/.(woff|svg|eot|ttf)??.*$/,
				loader:"url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]"
			}		
		]
	},
	//使用插件
	plugins:[
//生成html,标题,用到的模板
		new html({
			title:"myVue",
			template:__dirname+"/app/index.html",
			filename:"index.html",
		}),
//删除www目录,这里为了后面看效果,先不删除
		// new clean(["www"]),
	],
	//sudo npm install webpack-dev-server -g 设置自动刷新和端口
	devServer: {
		contentBase:"./www",
	    inline: true,
	    port: 8088
    },
	resolve:{
		alias: {
			'vue$': 'vue/dist/vue.common.js'
        }
	}
}

其中:

entry 入口文件 让webpack用哪个文件作为项目的入口

output 出口 让webpack把处理完成的文件放在哪里

module 模块 要用什么不同的模块来处理各种类型的文件

plugins 插件 用来配置需要用到的插件

resolve 用来设置路径指向

用到的模块包括:

webpack html-webpack-plugin clean-webpack-plugin style-loader css-loader less-loader less url-loader file-loader vue vue-router vue-loader vue-template-compiler babel-loader babel-preset-es2015 babel-core babel-plugin-transform-runtime

 

3.安装相应的模块

1)在myVue目录下安装模块

npm install webpack html-webpack-plugin clean-webpack-plugin style-loader css-loader less-loader less url-loader file-loader vue vue-router vue-loader vue-template-compiler babel-loader babel-preset-es2015 babel-core babel-plugin-transform-runtime

2)安装自动刷新全局模块

npm install webpack-dev-server -g

4.配置index.html文件

打开文件,配置如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<div id="app">
		<app></app>
	</div>
</body>
</html>

注意:

移动端用需要配置视口viewport,配置头部,配置body部分id

 

5.构建测试代码

下面要实现功能就是点击下方导航就跳转到对应的页面,而且标题会随着页面而修改。

1)构建各子页面和公共组件

pages目录下新建五个目录,分别为首页、分类、社区、购物车和我的对应的英文文件夹,再在每个文件夹里面设置对应的vue页面home.vue,classify.vue,community.vue,shopcart.vue,mine.vue,每个页面写入测试内容,比如home.vue写入代码如下:

<template>
	<div class="home">
		<header1 title="首页"></header1>
		<div>{{data}}</div>
	</div>
</template>
<script type="text/javascript">
	import Header1 from '../../component/header/header1.vue';
	export default {
		components:{
			Header1
		},
		data(){
			return{
				data:"这是首页"
			}
		}
	}
</script>

注意到每个页面要导入header1,在component组件下面新建header文件夹,新建一个header1.vue文件,写入头部代码:

<template>
	<div class="header">
		{{title}}
	</div>
</template>
<script type="text/javascript">
	export default {
		props:["title"]
	}
</script>
<style type="text/css">
	.header {
		background: #ddd;
		text-align: center;
		line-height: 50px;
	}
</style>

那如何将各页面标题传值到标题上呢?这里用到了props传值,在vue官方文档上解释为:“组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用
props 把数据传给子组件”。

那么这里props绑定的是title,而在各个子页面的头部,直接给title赋值即可,比如home页面的:

<header1 title="首页"></header1>

2)构建入口文件入口页面

打开app.js文件,里面要导入组件vue,导入vue路由,导入各个页面

import Vue from 'vue';
import VueRouter from 'vue-router';
//主页面入口
import App from "./app.vue";
//其他页面
import Home from "./pages/home/home.vue";
import Community from "./pages/community/community.vue";
import Classify from "./pages/classify/classify.vue";
import Mine from "./pages/mine/mine.vue";
import Shopcart from "./pages/shopcart/shopcart.vue";

Vue.use(VueRouter);

const router = new VueRouter({
	routes:[
		{path:"/",component:Home},
		{path:"/community",component:Community},
		{path:"/classify",component:Classify},
		{path:"/mine",component:Mine},
		{path:"/shopcart",component:Shopcart}
	]
})
//指定一开始加载的页面
new Vue({
	router,
	render:h=>h(App)
}).$mount("#app")

这里将对应的组件和页面导入,并生命一个路由,里面设置各页面对应的路径和指定的页面,然后new Vue一个vue,在里面使用这个路由,然后使用render函数和箭头函数返回App组件,然后使用mount挂载到Index.html里面去。

首页默认为home页,path路径设置为/

 

打开aap.vue页面,写入测试代码

<template>
	<div>
		<div class="content">
			<router-view></router-view>
		</div>
		<div class="nav">
			<router-link to="/">首页</router-link>
			<router-link to="/classify">分类</router-link>
			<router-link to="/community">社区</router-link>
			<router-link to="/shopcart">购物车</router-link>
			<router-link to="/mine">我的</router-link>
		</div>
	</div>
</template>
<style type="text/css" lang="less">
/*使用less样式*/
@import './common/css/reset.css';
	.nav{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		border-top: 1px solid #ccc;
		background: white;
		a{
			flex:1;
			display: block;
			text-align: center;
			line-height: 50px;
			color: black;
		}
	}
	.content{
		font-size: 30px;
		padding-bottom: 50px;
	}
</style>

使用router-link路由,toapp.js中对应的path,路由对应的页面放在router-view中,使用less方式设置样式表;

另外这里也import如重置样式表,当然也可以用link

6.运行代码

敲完测试代码之后,整个项目文件夹目录如下:

打开myVue文件夹,运行webpack

webpack

运行可以看到各个文件的打包情况,若有报错,需要根据报错去查找原因。

运行结果是myVue目录下多出一个www文件夹,里面有一个index.htmlbundles.js文件,这是webpack.config.js文件中设置对应的目录和文件名然后webpack打包生成的。

运行index.html文件:

可以看出,当点击导航栏时,路由将对应的子页面展示在router-view中,子页面中导入的header1公共组件中绑定的title也随着子页面传值改变而改变。

 

7.自动刷新

webpack.config.js中有这段代码:

devServer: {

contentBase:"./www",

    inline: true,

    port: 8088

  },

实际开发中需要边开发边自动刷新,这样不需要不停的运行webpack,这段代码就是开启一个服务器,并自动刷新,当修改代码时会自动刷新。

myVue中打开命令行,输入

webpack-dev-server

运行之后会显示端口地址http://localhost:8088,在浏览器中打开这个地址就会显示对应的页面,当实时修改代码保存,浏览器就会自动刷新展示最新效果。

 

这样,一个简单的使用vue开发的框架搭建完成。

本篇代码地址:http://pan.baidu.com/s/1kVmIr6v
密码:
yka9

IT文库 » Vue入门实战01:搭建webpack+vue开发环境
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址