基于Vue2+TypeScript的项目规划搭建-阿里云开发者社区

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

2017-10-13 1612

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

最近手头的项目都已经接近尾声，时间比较宽裕，于是想着升级一下网站。上一版的网站还是我刚接触前端时设计的，使用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>