文档章节

Vue工程化

LinearLaw
 LinearLaw
发布于 2017/04/23 19:23
字数 2259
阅读 175
收藏 5

Vue工程化

文件结构:

|-dist
|---bundle.js		合并后的js文件
|---index.html		处理后的html文件

|-src
|---component		存有vue组件的文件夹
|-----App.vue		主vue组件,直接和html关联
|-----xxx.vue		vue组件,可以通过组件注册或路由将其引入到页面中

|---index.html		页面,作为所有vue组件的容器
|---main.js			主js,在webpack处理的时候的入口文件,里面import了其他的模块或包

|-package.json			存有项目的依赖信息
|-webpack.config.js		webpack用于将vue项目转换成上线的格式

vue组件的构造

1、index.html
	用于存放主vue的容器,定义一个id即可。
	eg:
		<div id="app">

		</div>

2、main.js
	主js入口文件,用于定义vue实例,引入主vue文件。
	eg:
		import Vue from 'vue'  
		import App from './App.vue' 
		
		new Vue({
		  el: '#box',
		  render: l => l(App)
		})

tips:在这里,render: h=>h(App)相当于
		render: function (arg){
			arg(App)
		}
	表明将App.vue的内容渲染到页面的#app中;

3、App.vue
	主vue文件,在这里定义组件并注册组件。
	直接以组件名作为标签名,来提示组件加入的位置。

	eg:
		<template>
		    <div>
		        <myhome></myhome>
		    </div>
		</template>
		
		<style lang="less" scoped>
			
		</style>
		
		<script>
		    import Home from "./Home.vue"
		    export default{
		        components:{
		            myhome:Home
		        }
		    }
		</script>
	tips:template里写html页面标签,即这个组件的内容,
		style里写样式,若格式为less则加上属性lang="less",限定样式只在本文件生效,加scoped;
		script中先import引入组件,export default在这里相当于new Vue,在components中定义组件名和组件;

		要在页面中指定位置显示引入的组件,以这个组件名作为标签名,写入该标签即可;

	tips:创建多个vue文件,在App.vue中引用它们,输出到页面中。
		例如这里的Home.vue。

vue路由的构造

1、配置路由在main.js中进行,引入路由组件在App.vue中进行;

	tips:可以理解为,App.vue相当于index.html,通过这个vue作为入口引入其他的组件。

2、main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//引入vue组件
import App from './App.vue'
import Detail from './components/Detail.vue'
import Cart from './components/Cart.vue'

// 也可以引用一些样式
import 'animate.css'


// 1.注册路由
Vue.use(VueRouter)

// 2.配置路由规则

const router = new VueRouter({

  // 数组里一个对象就是一个规则,
  // router-view 当url中锚点值是#/cart时, Cart组件中的标签会显示到router-view标签

  routes:[
   {name:'cart',path:'/cart', component:Cart},
   {name:'detail',path:'/detail/:goodsid',component:Detail}

   		// 动态路由的写法,在锚点后加:变量名,this.$route.params.goodsid 可以获取到goodsid对应的值。
  ]
})

// 3.要在new Vue时加上router属性,值为上面new出的路由规则对象
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})	

	tips:routes中定义组件,component后的组件不加引号;
		若报错,在routes中的最后一个元素后加逗号;	
	eg:
		routes:[
	      {path:'/pageone',component:page_1},
	      {path:'/pagetwo',component:page_2},
	    ]

3、App.vue
	在这里加入路由标签和响应的view

<router-link to="/home">点击这里切换到home</router-link>
<router-link to="/cart">点击这里切换到cart</router-link>

<router-view></router-view>

	tips:若需要动态路由,在main.js中定义规则的时候,
		path:"/xx/:id",通过this.$route.params.id获取到该值
	tips:link中设置切换组件的入口,view的位置即为组件添加到页面中的位置

Vue属性

1、data:数据都放在data中
	eg:
		new Vue({
			data:{
				//在new Vue()中的写法
			}
		})
		
		export default{
			data:function(){
				return {
					//在组件export default中的写法
				}
			}
		}
2、methods:方法。
	eg:	
		methods:{
			addxx:()=>{

			},
			delxx:()=>{

			}
		}

3、component:页面组件,
		格式为 ‘组件名:组件’,在页面中调用直接用组件名作为标签。
	eg:
		<template>
		    <div>
		        <myhome></myhome>
		    </div>
		</template>

		<script>
		    import Home from "./Home.vue"
		    export default{
		        components:{
		            myhome:Home
		        }
		    }
		</script>

4、mounted:在DOM元素加载之后执行,可以在其内部写DOM操作;
		tips:在前面import jquery from "jQuery",可以用$在其内部使用jquery。
	eg:
		mounted:function(){
			//在这里操作DOM
		}

5、created:当组件自身的实例对象被创建的时候触发该事件;
		created在mounted之前执行。
		在这里我们可以发送ajax请求数据,将其输出到data中。
	eg:
		created:function(){
			axios.get('./url',)
				.then(()=>{

				})
		}
	
6、updated: updated在data发生变化渲染更新视图的时候触发。
	eg:
		updated:function(){

		}

7、computed:当页面的data数据发生了改变的时候就会调用该函
	eg:
		computed:{
            age: function() {
                return this.childrens.age +10;
            }
        }


tips:当使用了vuex的时候,computed可以获取状态的更新;
	eg:
		const store = new Vuex.Store({
			state:{
				count: 0
			}
		})
		const app = new Vue({
			store,
			computed:function(){
				count:function(){
					return this.$store.state.count
				}
			}
		})
	当state中的数据改变的时候,都会重新计算页面中的数据,computed会被触发,更新页面;

总结

1、vue结构,
	index.html
		为主html页面,里面只需要定义一个元素id即可。

	App.vue,
		App.vue中的html内容会直接插入到index.html中,
		App.vue中引入其他组件,直接以该组件名作为标签,写在template中。
			exports default{
				data:function(){
					return{
						a:xx,
						b:yy
					}
				}
			}

	main.js
		js入口文件,在这里import vue from "Vue",引入各种依赖;
		同时,在这里创建Vue实例化对象,即new Vue()
		注册路由在这里进行,路由的配置信息设置好之后,传入路由,即
			new Vue({
				data:{},
				methods:{},
				router:new Router({
					routes:[
						{path:"/home",component:Home},
						{path:"/cart",component:Cart}	
					]
				})
			})
		在定义路由之前,需要引入对应的组件,
			import Home from "./Home.vue";
			import Cart from "./Cart.vue";

	Cart.vue
		组件,可以在这里写自己的组件信息,
		template里写html,style中写css,script中写组件配置;
	Home.vue
		同上。

tips:在vue后缀名的文件中export default{},可以视作相当于new Vue({});
	唯一区别是其data要写成函数返回值的形式;

	eg:
		new Vue({
			data:{
				a:xx,
				b:yy		//new Vue的形式data直接是一个对象
			}
		})

		export default{
			data:function(){
				return {
					a:xx,
					b:yy	//export default的形式,data写成函数形式,return一个对象,对象里写data的值;
				}
			}
		}
		
2、webpack
	vue的工程化开发,需要配合webpack使用,webpack不一定要自己写。
	可以使用vue-cli来进行自动生成vue的结构文件。
	方法:

		npm i -g vue-cli				安装vue-cli模块
		vue init webpack my-project		利用webpack创建一个项目文件,文件名为my-project.

		cd my-project		进入my-project文件夹
		npm install			安装依赖,npm会根据package.json中包的信息来装环境,不用管。
		npm run dev			运行服务,启动服务。在localhost:8086端口可以打开当前的index.html页面。

	tips:执行完之后,就可以修改App.vue和main.js,以及创建vue文件这些操作,来进行开发页面了。

	tips:要开发vue文件,需要webpack进行配合,
		vue-cli可以提供一个webpack的压缩环境,不需要自己写webpack的文件了,拿来就能用,仅此而已。

3、axios

	(1)、vue本身不支持ajax请求,需要用axios包来配合使用。

	tips:Vue 原本有一个官方推荐的 ajax 插件 vue-resource,
		但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

		因此目前主流的 Vue 项目,ajax 请求用 axios 来完成 ,而大型项目都会使用 Vuex 来管理数据;

	(2)、安装
		npm install axios -S

	(3)、改写原型链(写在main.js中)
		import axios from 'axios'
		Vue.prototype.$ajax = axios

		此时,就可以直接在methods的function中直接用$ajax来使用axios了

		eg:
			methods: {
			  submitForm () {
			    this.$ajax({
			      method: 'post',
			      url: '/user',
			      data: {
			        name: 'wise',
			        info: 'wrong'
			      }
			   })
			} 
4、npm项目运行
    npm run dev         编译环境,开启服务,输入localhost:8086
    npm run build       线上架构,开启后将代码放到服务器中即可运行

    tips:npm run build 之后代码会被压缩,放到了dist文件夹里,但是不能用file协议打开,而要用服务器环境才能打开。
    解决办法:
        (1)、到项目目录下的 config 文件夹里的 index.js 文件中,找到 build 对象,
        (2)、将 assetsPublicPath 中的 “/” ,改为 “./” ,就在前面加个点就可以了,
        (3)、并在 build\build.js 将提示file协议不能打开的两句提示信息删掉或注释掉,
        (4)、再打包直接用浏览器直接运行就好了。 

需要的包

package.json

	{
	  "name": "text_276_wpk_basic",
	  "version": "1.0.0",
	  "description": "",
	  "main": "webpack.config.js",
	  "scripts": {
	    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
	    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
	  },
	  "keywords": [],
	  "author": "",
	  "license": "ISC",
	  "devDependencies": {
	    "async-validator": "^1.6.8",
	    "babel-core": "^6.24.0",
	    "babel-loader": "^6.4.1",
	    "babel-plugin-component": "^0.9.1",
	    "babel-preset-es2015": "^6.24.0",
	    "cross-env": "^4.0.0",
	    "css-loader": "^0.28.0",
	    "file-loader": "^0.11.1",
	    "html-webpack-plugin": "^2.28.0",
	    "jquery": "^3.2.1",
	    "less": "^2.7.2",
	    "less-loader": "^4.0.3",
	    "style-loader": "^0.16.1",
	    "vue-core-image-upload": "^2.0.10",
	    "vue-loader": "^11.3.4",
	    "vue-quill-editor": "^2.0.4",
	    "vue-router": "^2.3.1",
	    "vue-template-compiler": "^2.2.6",
	    "webpack": "^2.3.2",
	    "webpack-dev-server": "^2.4.2"
	  },
	  "dependencies": {
	    "element-ui": "^1.2.7",
	    "vue": "^2.2.6",
	    "vue-echarts-v3": "^1.0.3"
	  }
	}

webpack.config.js

	const path = require("path");
	const Hwp = require("html-webpack-plugin");
	
	var obj = {
	  /**
	   * entry用于指定需要处理的js入口文件
	   * 对于vue,这里处理创建vue对象的main.js
	   */
	  entry: {
	    app: "./src/main.js"
	  },
	  /**
	   * output用于指定输出文件的路径和打包之后的js名称
	   */
	  output: {
	    path: path.join(__dirname, "./dist"),
	    // publicPath: '/dist/',
	    filename: "bundle.js"
	  },
	  /**
	   * module指定less文件和vue文件的处理工具,
	   * ————loader
	   * vue用vue-loader,
	   * less用vue-style-loader、style-loader、css-loader、less-loader
	   */
	  module: {
	    loaders: [
	      {
	        test: /\.js$/,
	        loader: 'babel-loader',
	        exclude: /node_modules/
	      },
	      {
	        test: /\.vue$/,
	        loader: 'vue-loader'
	      },
	      {
	        test: /\.css$/,
	        loader: 'style-loader!css-loader'
	      },
	      {
	        test: /\.less$/,
	        loader: 'vue-style-loader!style-loader!css-loader!less-loader'
	      },
	      {
	        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
	        loader: 'file-loader'
	      },
	      {
	        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
	        loader: 'file-loader',
	        query: {
	          name: '[name].[ext]?[hash]'
	        }
	      }]
	  },
	  // devServer: {
	  //   historyApiFallback: true,
	  //   noInfo: true
	  // },
	  // devtool: '#eval-source-map',
	  /**
	   * plugins里面写一个new HtmlWebpackPlugin,
	   * 里面的template指定了需要插入script标签的html文件
	   */
	  plugins: [
	    new Hwp({
	      template: './src/index.html'
	    })
	  ]
	}
	// if (process.env.NODE_ENV === 'production') {
	//   module.exports.devtool = '#source-map'
	//   // http://vue-loader.vuejs.org/en/workflow/production.html
	//   module.exports.plugins = (module.exports.plugins || []).concat([
	//     new webpack.DefinePlugin({
	//       'process.env': {
	//         NODE_ENV: '"production"'
	//       }
	//     }),
	//     new webpack.optimize.UglifyJsPlugin({
	//       compress: {
	//         warnings: false
	//       }
	//     })
	//   ])
	// }
	module.exports = obj

© 著作权归作者所有

共有 人打赏支持
上一篇: 浅析继承方式
下一篇: Git常用指令
LinearLaw
粉丝 4
博文 36
码字总数 43561
作品 0
深圳
个人站长
私信 提问
深入浅出 - vue之深入响应式原理

高质量文章 谈,前端框架的『御剑之道』 2018你应该知道的Web性能信息采集指南 嗨,送你一张Web性能优化地图 为什么Vue使用异步更新队列? 聊聊我对现代前端框架的认知 深入浅出 - vue变化侦...

大灰狼的小绵羊哥哥
11/18
0
0
使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七
05/09
0
0
《Vue2.0 实践揭秘》终于出版啦!

这本书是去年搞Vue项目时头脑一发热就找编辑说要写这么一个题材的一本书。折腾了大半年终于是上市销售了,今天偶然打开京东查了一下竟然已经开卖了,心里面是有点小激动,毕竟这是我上架的第...

rayliang
2017/04/21
0
0
高手问答第 177 期 —— iView 作者带来的 Vue.js 实战分享

OSCHINA 本期高手问答(11 月 15 日 - 11 月 21 日)我们请来了@aresn 为大家解答关于 Vue.js 实战方面的问题。 梁灏,网名 Aresn,基于 Vue.js 的高质量开源 UI 组件库 iView 的作者。目前在大...

局长
2017/11/14
5K
34
vue.js之使用Vue CLI开发多页面应用

简要说明 Vue CLI是一个基于Vue.js进行快速开发的完整系统,是vue-cli的升级版,除含有快速搭建Vue项目的脚手架外还有许多实用功能,vue ui是个亮点,官方详细文档传送门。 一、安装Vue CLI...

louieSun
10/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
4
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
7
0
EOS错误代码及中文释义

本文集汇总了EOS区块链常见错误代码及其含义,完整错误代码集请查看 EOS错误代码集 - 汇智网 EOS错误代码列表如下, <table class="table table-striped"> <thead> <tr><th>错误代码</th><t......

汇智网教程
昨天
2
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
4
0
kiss原则

KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”。换句话说来,”简单就是美“。KISS 原则源于 David Mamet(大卫马梅)的电...

NB-One
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部