vue.js 自动化流程

前言

最近挺忙的。虽然这几天看了几本书。但是并没有什么可以分享的。 不过这几天在不断重构,踩坑。今天顺手记录下来。

目录

├── Gulpfile.js ├── app │   ├── images │   ├── index.html │   ├── public │   │   ├── images │   │   ├── javascripts │   │   └── stylesheets │   └── vue │   ├── api.js │   ├── app.js │   ├── assets │   ├── components │   ├── routers.js │   └── views ├── node_modules ├── package.json └── webpack.config.js

事实上基于vue0.12版本,因此大概就是这个路子。

这是pc端开发的环境。后续的移动端也在构思中。

我挑几个思路讲讲。

webpack

直接贴代码

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
	entry: {
		index:'./app/vue/app.js',
  },
	output: {
		path: __dirname + "/app/public/javascripts/build/",
		filename: "[name].App.js"
	},
	module: {
		loaders: [
			{
				test: /\.vue$/,
				loader: "vue"
			},
			{
				test: /\.css$/,
				loader: ExtractTextPlugin.extract("style-loader", "sass-loader")
			},
			// {
			// 	test: /\.(png|jpg)$/,
			// 	loader: "url-loader?mimetype=image/png"
			// },
			{
				test: /\.json$/,
				loader: "json"
			}
		]
	},
	plugins: [
		new ExtractTextPlugin("App.css")
	],
	devtool: "source-map"
}

filename: “[name].App.js” 是为了区分不同业务的单页面。

loader: ExtractTextPlugin.extract(“style-loader”, “sass-loader”) 记得自己配好sass的一系列包,其中有些大坑以后遇到了再讲。

api.js

这是为了不同业务需求请求不同url,进行统一管理并分配。

//API接口
//使用方式为 
//使用例子:api.manage.handle("getlists","activity")

  var allurl = {
    index : "getList",
    indexadd : "addNews",
    indexItemGet : "getNews",
    indexupdate : "updNews",
    indexdelete : "delNews",
  };


exports.manage = { 

  handle: function(name,action,param,flag){
    return this["_"+name](allurl[action],param,flag);
  },
  //获取列表
  _getlists: function(url) {

  },
  
}

引用时很方便,只需要在对应vue文件中加载api


var api = require('../../api');

然后直接调用类似下面格式,这样你就不需要重复写相同的添加删除更新修改等业务逻辑了。只需要在api.js里面写一次,特殊的再独立出来。一般情况下重复的操作请求是类似的。

 var result =  api.manage.handle("add","boardroomadd",item); 
 

善于利用vue的组件

当时写项目还是0.12版本,不过思路是一致的,把一些基础的功能比如遮罩,比如上传等等写成组件。

善用vue自带的路由

这点对于父子列表,以及单页面处理非常有用。但是如果需要seo,你需要改变,把原本repeat的内容让后台输出。

用sass减轻负担

在vue页面里我是这么写的:


<style lang="sass">
$PageType : boardroom;

@import './../../assets/sass/_admincontent.sass';


</style>

多个功能公用一套,然后sass页面这么写:

.admin-#{$PageType} ul
	padding-left: 0px;

.admin-#{$PageType} .itemLink
  text-decoration: none;
  background-color: black;
  color: black;

这样以后改起来只需要改一个文件就能同步更新所有组件。

还有就是.sass后缀需要把大括号去掉。这个坑让我踩了蛮久。如果你改成.scss后缀是没影响的。

最后

然后就是在index.html只引用打包好的文件。

	<script src="public/javascripts/build/jquery.min.js"></script>
	<script src="public/javascripts/build/index.App.js"></script>

这样开启webpack 监听就可以自由的编码了。

Table of Contents