最近手头的项目都已经接近尾声，时间比较宽裕，于是想着升级一下网站。上一版的网站还是我刚接触前端时设计的，使用Zepto为主要框架，代码毫无模块化思想，因为后续的功能越加越多，现在每次维护都有自杀的冲动。于是这次想着彻底重构一下网站。
前言
这次重构考虑了很久最终选择了Vue2作为前端的主要框架，还有一些辅助的技术。项目就环境而言健壮性还是很不错的。在搭建环境的过程中遇到了很多问题，浪费了很多时间。这里把环境配置的过程贴出来，如果你们遇到了同样的问题，希望可以帮你们节省一些时间。
这里有一个搭建好的Vue2(2.5+)+TypeScript+ESlint+TSlint+Vuex的项目环境，可以直接使用，里面有一些我自己用到的函数可以自行删除。
GitHub：https://github.com/lwpersonal/module
常规环境搭建
先是常规的vue-cli脚手架，按照官网的示例走，没什么可说的，这里在初始化的选项中没有用官方脚手架中配置的Eslint，而是后续自己配置的。
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
$ cd my-project
# 安装依赖，这里用cnpm可能会丢包
$ npm install
# 然后就可以运行看到界面了
$ npm run dev自定义配置
接下来就是一些自定义的配置，本例中使用的编译器是VSCode。安装下面这些需要用到的插件。
- ESlint
- TSlint
Eslint配置
Eslint的配置比较简单，安装相应的插件后安装Eslint的包，在项目的根目录下初始化配置文件。
# 这里注意，如果全局安装的话后续的一些Eslint插件也需要全局安装
$ npm install eslint --save-dev
# 这个插件是让Eslint支持检测vue文件中的js代码，配置在后面会贴出
$ npm install eslint-plugin-html --save-dev
# 这个插件可以让Eslint识别 @ 等ES7的语法
$ npm install babel-eslint --save-dev
$ npm install eslint-plugin-promise eslint-plugin-standard --save
# 初始化配置，会根据选择生成js或json文件，这里可以根据自己的需求选择不同的选项
$ eslint --init
自己建立文件的话，配置文件放在根目录就可以。放在子目录的话，子目录的配置文件会覆盖根目录的配置。
如果想要忽略某一个文件，不对其检测可以在js文件内顶部加一句注释代码
/* eslint-disable */.eslintrc.js：（更多配置移步Eslint规则）
// .eslintrc.js
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
},
plugins: [
// 此插件用来识别.html 和 .vue文件中的js代码
'html',
// standard风格的依赖包
"standard",
"promise"
],
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"parser": "babel-eslint", // 让eslint支持es7语法@等
"rules": {
"strict": 0, // 让eslint支持es7语法@等
"no-alert": 2, // 禁用 alert
"no-console": 0, // 禁用 console
"no-irregular-whitespace": 2, //禁止tab、空格之外的非法空白
"array-bracket-spacing": [2, "never"],//禁止或强制在括号内使用空格, 禁止使用不一致的空格，应该遵守格式 [1, 2, 3],也就是,逗号后面一个空格
"func-call-spacing": 2, // 函数执行需要紧挨着(括号
"newline-after-var": 1, // 变量定义后增加空行 warn
"no-mixed-spaces-and-tabs": 2,// 禁止混用tab与空格 禁止空格和 tab 的混合缩进
"no-trailing-spaces": 2, // 行尾不留空格
"comma-spacing": 2, // 逗号后非行尾需要加空格
"spaced-comment": [2, "always"], // 注释后面//后需要增加空格
"no-unreachable": "error", // 禁止在return、throw、continue 和 break 语句之后出现不可达代码
"no-dupe-keys": "error", // 禁止对象字面量中出现重复的 key
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"no-trailing-spaces": 0, // 无拖尾空格
"linebreak-style": 0 // 忽略行尾的换行符
}
};然后在VScode中看一下Eslint的服务器启动是否成功，如果失败的话根据错误提示npm安装相应的模块，如果老是报错的话试着全局和本地都安装一下
这里是成功后的界面
然后在工作区打开js文件就可以用Eslint检测代码了
Tslint配置
Tslint的配置类似，生成配置文件放在根目录就可以。
$ npm install tslint --save-dev更多配置移步Tslint配置
// tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"no-var-keyword": true,
"comment-format": [
true,
"check-space"
],
"quotemark": false,
"triple-equals": true, // 必须用 === 代替 ==
"semicolon": false, // 行末分号
"ordered-imports": false, // 引入模块文件必须按照字母顺序排列
"no-unused-expression": false, // 未使用的表达式，开启后不能实例化vue
"trailing-comma": false, // object等，语句后必须加逗号
"object-literal-sort-keys": false, // 组件按字母顺序排列
"space-before-function-paren": true, // 函数前禁止空格
"switch-final-break": true, // 检测switch语句后是否有break
"variable-name": true, // 错误变量名检查
"arrow-parens": false // 箭头函数参数必须加括号
},
"rulesDirectory": []
}成功后会启动相应的检测服务器
然后打开.ts文件就可以使用Tslint了
Typescript
Typescript的使用比较繁琐，使用到几个vue的插件
# 安装一些用到的插件
$ npm install typescript ts-loader --save-dev
$ npm install vue-class-component vue-property-decorator --save-dev然后再你放组件的目录下新建vue.d.ts文件(vue-cli创建的项目默认src目录下)
// 识别vue,html文件中的代码
declare module "*.vue" {
import Vue from "vue"
export default Vue
}更改webpack配置文件
// ...
resolve: {
extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
// ...
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
// ...
]
},接下来可以这样写vue组件了
<template>
<my-button ref="button"/>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Watch } from 'vue-property-decorator'
import Button from './button.vue' // 这里需要写.vue后缀
@Component({
//这里放vue实例的配置
// props的第一种写法，需要在下声明一下才可以使用
props: {width:Number,ratio:Number}
})
export default class Swiper extends Vue {
// props声明
width:Number
ratio:Number
// vue实例中的data属性这样写
scrollWidth :number = window.screen.availWidth
// ref 子组件的引用
$refs: {
button: Button
}
// 生命周期
mounted () {
}
// props的第二种写法
@Prop()
width :number
@Prop()
ratio :number
@Prop()
swiperData :Array<Object>
// 计算属性
get swiperStyle() :any {
}
// watch
@Watch('$route')
onRouteChanged(route: any, oldRoute: any) :void {
}
// 函数方法可以直接写
getData() :void {}
}
</script>
<style lang="stylus" scoped>
</style>
到这里环境的配置已经到尾声了，使用了这些工具后虽然刚开是会很痛苦，但是后期维护绝对会节省很多时间。
文章原址：http://blog.csdn.net/qq_25243451/article/details/78231404
