typescript+vue2.0+vue-video-player一步一步搭建引用项目

1：首先安装node.js

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。
node.js的安装版本根据自己电脑或者服务器自行选择，这里就不做具体安装说明

2：安装npm使用cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org

3：安装vue

    cnpm install vue

4:创建vue项目

    vue init webpack vue-typescript

//创建完项目后的步骤
? Project name vue-typescript 项目名称（回车）
? Project description A Vue.js project 备注（回车）
? Author 作者（回车）
? Vue build standalone
? Install vue-router? No 是否创建router (NO)
? Use ESLint to lint your code? No 是否检查代码（NO）
? Setup unit tests with Karma + Mocha? No 是否生产测试环境（NO）
? Setup e2e tests with Nightwatch? No 是否创建测试服务（NO）

5:安装TypeScript相关依赖和项目其余依赖，用npm或cnpm

# cd /vue-typescript

npm install typescript ts-loader –save-dev

npm install

6:修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则

    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },

7:在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码

declare module "*.vue" {

import Vue from “vue”;
export default Vue;
}

8:在项目根目录下建立TypeScript配置文件tsconfig.json

{
“compilerOptions”: {
“strict”: true,
“module”: “es2015”,
“moduleResolution”: “node”,
“target”: “es5”,
“allowSyntheticDefaultImports”: true,
“lib”: [
“es2017”,
“dom”
]
}
}

9:重命名src下的main.js为main.ts

10:修改webpack.base.conf.js下的entry>app为’./src/main.ts’

11:修改src下的App.vue文件，在

12:下面可以测试是否集成成功，编辑src/components/Hello.vue文件，修改

import Vue, {ComponentOptions} from 'vue' export default { name: 'hello', data() { return { msg: 'this is a typescript project now' } } } as ComponentOptions

13:运行项目

npm run dev

14：安装开发依赖

npm install –save-dev vue-class-component

15：修改ts配置文件，增加以下两项配置

“allowSyntheticDefaultImports”: true,
“experimentalDecorators”: true,
16：改写我们的Hello组件

import Vue from 'vue' import Component from 'vue-class-component' @Component export default class Hello extends Vue { msg: string = 'this is a typescript project now' }

17：使用vue-class-component后，初始数据可以直接声明为实例的属性，而不需放入data() {return{}}中，组件方法也可以直接声明为实例的方法，如官方实例，更多使用方法可以参考其官方文档

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from ‘vue’
import Component from ‘vue-class-component’
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
// 所有的组件选项都可以放在这里
template: ‘

18：如果对代码格式有着严格的要求，建议引入 tslint 来规范代码，首先安装以下依赖

npm init tslint tslint-loader tslint-config-standard -D

19：#解决require无效问题

cnpm install –save-dev @types/webpack-env