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:		
    
		
    
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：		
    									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.jsimport 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
    
     点击这里切换到home
    
    
     点击这里切换到cart
    
    	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:		
    		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