Vue+Typescript+Axios+Less+Vuex项目环境的起步搭建

一、搭建vue-cli脚手架
这个过程就不详细说明了不清楚的可以翻阅我以前的有关vue脚手架的文章
二、安装Typescript相关依赖
npm i vue-class-component vue-property-decorator --save
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

• vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件

• vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器如下：
  @Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (从 vue-class-component 继承)

• ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件

• tslint-loader跟tslint：我想你也会在.ts .tsx文件 约束代码格式（作用等同于eslint）

• tslint-config-standard：tslint 配置 standard风格的约束

三、配置webpack
（1）找到文件build/webpack.base.conf.js
找到entry.app 将main.js 改成 main.ts, 顺便把项目文件中的main.js也改成main.ts, 里面内容保持不变
（2）找到resolve.extensions 里面加上.ts 后缀 （是为了之后引入.ts的时候不写后缀）

resolve: {
	    extensions: ['.js', '.vue', '.json', '.ts'],
	    alias: {
	      '@': resolve('src')
	    }
 }

（3）找到module.rules 添加webpack对.ts的解析

module: {
  rules: [
    {
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    },
// 开始
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },
// 复制从开始以上的即可
  }
}

四、添加配置 tsconfig.json 和 tslint.json文件
（1）在根路径下创建tsconfig.json文件，以下是简单的配置，详细的可访问http://json.schemastore.org/tsconfig

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise",
      "scripthost"
    ],
    "sourceMap": true,
    "pretty": true,
    "strictFunctionTypes": false,
    "importHelpers": true
  }
}

（2）在根路径下创建tslint.json文件，就是 引入 ts 的 standard 规范

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

五、识别 .vue
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

注意：在引入组件的使用加.vue 因为TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：，例如import Component from 'components/component.vue'
六、改造.vue 文件
<template></template>和<style></style>内的内容和vue一样，主要修改<script lang="ts"></script>内的代码格式, 注意：在script 标签上加上 lang=“ts”, 意思是让webpack将这段代码识别为typescript 而非javascript，简单的代码格式如下，注意： @Component必须有没有子组件可以为空
（1）parent.vue

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import Child from '../../components/Child.vue';
    @Component({
        components: {
            Child
        },  
    })
    export default class parent extends Vue {
        num = 0;
        created(){
           
        }
    }
</script>

(2)child.vue(子组件获取父组件的数据@Prop)

  import Vue from 'vue';
  import Component from 'vue-class-component';
  import { Prop } from 'vue-property-decorator'

   @Component
   export class Child extends Vue {
	     @Prop()
	     num: number
	    created(){
            console.log(this.num);
        }
   }

六、使用less
（1）安装 npm install less -s
(2) 找到文件build/webpack.base.conf.js里的module.rules 添加webpack对.ts的解析

  {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
   },

七、使用Axios
在常规的安装了axios发现报错，后来百度换了一种思路就可以了
因为在ts中，不识别vue下面挂$axios，不可以挂在原型链上
（1)安装axios和vue-axios npm install axios vue-axios
（2）在main.ts中引入全局使用

	import axios from 'axios'
	import Vueaxios from 'vue-axios'
	Vue.use(Vueaxios, axios)

(3)在组件中直接this.axios.get/post直接使用

八、使用Vuex
今天先到这里改天继续完善，欢迎指正交流