<强>前言
Vue的官方文档没有给出与打印稿集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。
下面我就给出vue-cli建立的项目与打印稿集成的最简配置。
<强>初始化项目
首先用vue-cli建立webpack项目。这里为了演示方便,没有打开路由器和eslint等,可以根据自身情况打开。
# vue init webpack vue-typescript
& # 63;项目名称vue-typescript
& # 63;项目描述Vue。js项目
& # 63;作者
& # 63;Vue构建独立的
& # 63;安装vue-router& # 63;没有
& # 63;使用ESLint线头你代码# 63;没有
& # 63;设置单元测试与业力+摩卡# 63;没有
& # 63;设置与夜班e2e测试# 63;没有
之前
安装打印稿相关依赖和项目其余依赖,用npm或cnpm
# cd/vue-typescript
# npm安装打印稿ts-loader——save-dev
# npm安装
<>强配置
修改目录下建造/webpack.base.conf.js文件,在文件内module>规则添加以下规则
{
测试:/\ .tsx& # 63;美元/,
装载机:“ts-loader”,
排除:/node_modules/,
选择:{
appendTsSuffixTo: [/\ .vue/美元)
}
},
之前
在src目录下新建一个文件vue-shims.d.ts,用于识别单文件vue内的ts代码
申报模块”*。vue“{
从“进口Vue Vue”;
出口默认Vue;
}
在项目根目录下建立打印稿配置文件tsconfig.json
{
" compilerOptions ": {
“严格”:没错,
“模块”:“es2015”,
“moduleResolution”:“节点”,
“目标”:“es5”,
“allowSyntheticDefaultImports”:没错,
“自由”:(
“es2017”,
“dom”
]
}
}
之前
重命名src下的<代码> main.js 为<代码> main.ts
修改<代码> webpack.base.conf.js> entry>应用程序为“。/src/main.ts”
修改src下的App.vue文件,在
& lt;脚本lang=" t "在
<强>测试
下面可以测试是否集成成功,编辑src/组件/Hello.vue文件,修改
& lt;脚本lang=皌”比;
进口Vue, {ComponentOptions}从“Vue”
出口默认{
名称:“你好”,
数据(){
返回{
味精:“现在这是一个打字稿项目”
}
}
}ComponentOptions
& lt;/script>
运行项目
# npm运行dev
测试成功,现在是一个TypeScipt项目了
, 
<强>进阶
配置官方推荐的vue-class-component, https://cn.vuejs.org/v2/guide/typescript.html
安装开发依赖
# npm安装——save-dev vue-class-component
修改ts配置文件,增加以下两项配置
“allowSyntheticDefaultImports”:没错,
“experimentalDecorators”:真的,
改写我们的你好组件
& lt;脚本lang=皌”比;
从“Vue”进口Vue
从“vue-class-component”进口组件
@ component
出口的默认类你好延伸Vue {
味精:字符串=跋衷谡馐且桓龃蜃指逑钅俊?
}
& lt;/script>
使用vue-class-component后,初始数据可以直接声明为实例的属性,而不需放入数据()返回{}{}中,组件方法也可以直接声明为实例的方法,如官方实例,更多使用方法可以参考其官方文档
https://github.com/vuejs/vue-class-component vue-class-component
从“Vue”进口Vue
从“vue-class-component”进口组件//@ component修饰符注明了此类为一个Vue组件
@ component ({//所有的组件选项都可以放在这里
模板:“& lt;按钮@click=" onClick "祝辞点击! & lt;/button>”
}）
出口MyComponent默认类添加扩展Vue {//初始数据可以直接声明为实例的属性
消息:字符串=澳愫?”//组件方法也可以直接声明为实例的方法
onClick():{无效
window.alert (this.message)
}
}
