基于Vue2+TypeScript的项目规划搭建

---

最近手头的项目都已经接近尾声，时间比较宽裕，于是想着升级一下网站。上一版的网站还是我刚接触前端时设计的，使用Zepto为主要框架，代码毫无模块化思想，因为后续的功能越加越多，现在每次维护都有自杀的冲动。于是这次想着彻底重构一下网站。

---

前言

这次重构考虑了很久最终选择了Vue2作为前端的主要框架，还有一些辅助的技术。项目就环境而言健壮性还是很不错的。在搭建环境的过程中遇到了很多问题，浪费了很多时间。这里把环境配置的过程贴出来，如果你们遇到了同样的问题，希望可以帮你们节省一些时间。

这里有一个搭建好的Vue2(2.5+)+TypeScript+ESlint+TSlint+Vuex的项目环境，可以直接使用，里面有一些我自己用到的函数可以自行删除。
GitHub：https://github.com/lwpersonal/Vue2_TypeScript_ESlint

常规环境搭建

先是常规的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.jsmodule.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