摘要:靜態類型系統能幫助你有效防止許多潛在的運行時錯誤,而且隨著你的應用日漸豐滿會更加顯著。選擇,會生成符合規范的文件,使用,會生成滿足規范的文件,使用會生成使用的的代碼。使用或者是會生產包含特性的代碼。
靜態類型系統能幫助你有效防止許多潛在的運行時錯誤,而且隨著你的應用日漸豐滿會更加顯著。這就是為什么 Vue 不僅僅為 Vue core 提供了針對 TypeScript 的官方類型聲明,還為 Vue Router 和 Vuex 也提供了相應的聲明文件
TsConfig配置
{
"compilerOptions": {
// ts 文件編譯成 js 文件的時候,同時生成對應的 map 文件
"sourceMap": true,
"strict": true,
"strictNullChecks": true,
// 當表達式和申明 類型為any時,是否需要發出警告,設置true,則不警告
"noImplicitAny": true,
// 設置為true時,如果不是函數中的所有路徑都有返回值,則提示Error
"noImplicitReturns": true,
// module 用于指定模塊的代碼生成規則,可以使用 commonjs 、 amd 、 umd 、 system 、 es6 、 es2015 、 none 這些選項。
// 選擇commonJS,會生成符合commonjs規范的文件,使用amd,會生成滿足amd規范的文件,使用system會生成使用ES6的
// system.import的代碼。使用es6或者是es2015會生產包含ES6特性的代碼。
"module": "es2015",
"moduleResolution": "node",
// 設置為true時,則允許從沒有默認導出的模塊中默認導入(也就是不做檢查)
"allowSyntheticDefaultImports": true,
// 設置為true,則支持ES7的裝飾器特性
"experimentalDecorators": true,
// target 用于指定生成代碼的兼容版本,可以從es3,es5,es2015,es6中選擇一個,如果不設置,默認生產的代碼兼容到es3
"target": "es5"
},
"include": [
"./src/**/*"
]
}
配置參考:
官方文檔tsconfig解析
tsconfig的JSON文檔
Webpack的基礎配置一覽每個項目最重要的一部分個人感覺是webpack的配置,只有配置好webpack部分后續才能順利進行開發
這里webpack使用了4.+的版本,所以算是體驗了較為新的webpack,其中和舊版的有些區別,這里不做介紹
先貼出webpack的配置代碼
const path = require("path")
const webpack = require("webpack")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
module.exports = {
mode: process.env.NODE_ENV === "production" ? "production" : "development",
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
filename: "build.js"
},
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader",
options: {
loaders: {
"scss": "vue-style-loader!css-loader!sass-loader",
"sass": "vue-style-loader!css-loader!sass-loader?indentedSyntax",
}
}
},
{
test: /.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
transpileOnly: true,
appendTsSuffixTo: [/.vue$/]
}
}
]
},
resolve: {
extensions: [".ts", ".js", ".vue", ".josn"],
alias: {
"vue$": "vue/dist/vue.esm.js"
}
},
devServer: {
contentBase: "./public",
host: "localhost",
port: "8080",
open: true,
hot: true,
inline: true,
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: "#eval-source-map",
plugins: [
new VueLoaderPlugin()
]
}
if (process.env.NODE_ENV === "production") {
module.exports.devtool = "#source-map"
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: ""production""
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
} else {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.HotModuleReplacementPlugin()
])
}
注意點:
vue-loader v15需要在webpack插件中添加VueLoaderPlugin插件
webpack4.+需要指定mode,開發模式還是生產模式
注意ts-loader的配置
這里只是簡單進行webpack配置,沒有太完整地根據完整的項目來進行配置,只是簡單配置了生產環境下的代碼混淆壓縮,以及對應的開發服務器和熱更新等,有需要其他功能擴展的自行配置。
Vue環境搭建配置 vue-shims.d.ts的添加這個是比較重要的一個配置,該文件需要放到vue的入口文件中,具體的d.ts代碼如下:
declare module "*.vue" {
import Vue from "vue"
export default Vue
}
目的是讓ts能夠識別到vue的靜態類型
vue的入口文件index.ts:
import Vue from "vue"
import App from "./App.vue"
// vuex部分
import store from "./store"
new Vue({
el: "#app",
store,
render: h => h(App),
})
入口文件跟普通的js寫法沒有太多的區別,只是文件類型為ts。
開始寫vue的單文件頁面和組件 單文件頁面模板
主要是在script項中把lang寫為ts類型
使用裝飾器來實現組件和頁面這里我們主要使用兩個裝飾器庫vue-property-decorator 和 vuex-class, vue-property-decorator其是基于vue-class-得component的基礎擴展修改的。
大致了解一下vue-property-decorator的裝飾器的用法
一共有七個裝飾器:
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (exported from vue-class-component)
這里使用vue-property-decorator的例子來做解析
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from "vue-property-decorator" const s = Symbol("baz") @Component export class MyComponent extends Vue { @Emit() addToCount(n: number){ this.count += n } @Emit("reset") resetCount(){ this.count = 0 } @Inject() foo: string @Inject("bar") bar: string @Inject({from: "optional", default: "default"}) optional: string @Inject(s) baz: string @Model("change") checked: boolean @Prop() propA: number @Prop({ default: "default value" }) propB: string @Prop([String, Boolean]) propC: string | boolean @Provide() foo = "foo" @Provide("bar") baz = "bar" @Watch("child") onChildChanged(val: string, oldVal: string) { } @Watch("person", { immediate: true, deep: true }) onPersonChanged(val: Person, oldVal: Person) { } }
相當于js的寫法:
const s = Symbol("baz") export const MyComponent = Vue.extend({ name: "MyComponent", inject: { foo: "foo", bar: "bar", "optional": { from: "optional", default: "default" }, [s]: s }, model: { prop: "checked", event: "change" }, props: { ? ?checked: Boolean, ? ?propA: Number, propB: { type: String, default: "default value" }, propC: [String, Boolean], }, data () { return { foo: "foo", baz: "bar" } }, provide () { return { foo: this.foo, bar: this.baz } }, methods: { addToCount(n){ this.count += n this.$emit("add-to-count", n) }, resetCount(){ this.count = 0 this.$emit("reset") }, onChildChanged(val, oldVal) { }, onPersonChanged(val, oldVal) { } }, watch: { "child": { handler: "onChildChanged", immediate: false, deep: false }, "person": { handler: "onPersonChanged", immediate: true, deep: true } } })
相信通過以上的例子我們很容易就看出各個裝飾器如何去使用,這里就不再做太多的解釋。
再看一下vuex-class的使用方法
同樣舉例官方的使用列子
import Vue from "vue" import Component from "vue-class-component" import { State, Getter, Action, Mutation, namespace } from "vuex-class" const someModule = namespace("path/to/module") @Component export class MyComp extends Vue { @State("foo") stateFoo @State(state => state.bar) stateBar @Getter("foo") getterFoo @Action("foo") actionFoo @Mutation("foo") mutationFoo @someModule.Getter("foo") moduleGetterFoo @State foo @Getter bar @Action baz @Mutation qux created () { this.stateFoo // -> store.state.foo this.stateBar // -> store.state.bar this.getterFoo // -> store.getters.foo this.actionFoo({ value: true }) // -> store.dispatch("foo", { value: true }) this.mutationFoo({ value: true }) // -> store.commit("foo", { value: true }) this.moduleGetterFoo // -> store.getters["path/to/module/foo"] } }Vuex的配置 store的入口
import Vue from "vue" import Vuex, { StoreOptions } from "vuex" import { RootState } from "./modules/types" import { profile } from "./modules/profile" Vue.use(Vuex) const store: StoreOptions= { state: { version: "v1.0.0" }, modules: { profile } } export default new Vuex.Store (store);
這里RootState只是用于留空,目的是為了注入全局的store,區別于modules的狀態
vuex的modules的配置寫一個全局類型聲明
export interface RootState { version: string; }
version字段就是我們剛才在RootState中定義的字段
定義模板profile
profile模塊的類型聲明:
export interface ProfileState { firstName: string lastName: string }
profile的模塊實現:
import { RootState } from "../types" import { Module } from "vuex" import { ProfileState } from "./types" import { GetterTree, ActionTree, MutationTree } from "vuex" import axios, { AxiosPromise } from "axios" const state: ProfileState = { firstName: "", lastName: "" } const getters: GetterTree= { firstName(state) : string { return state.firstName }, lastName(state) : string { return state.lastName } } const actions: ActionTree = { fetchName({ commit }, id: number): AxiosPromise { console.log("action:", id) return axios.request({ url: "https://www.apiopen.top/satinCommentApi?id=27610708&page=1" }).then(res => { commit("setProfile", { firstName: "lin", lastName: "guangyu" }) return res }).catch(err => { return err }) } } const mutations: MutationTree = { setProfile(state, payload: ProfileState) { state.firstName = payload.firstName state.lastName = payload.lastName } } const namespaced: boolean = true; export const profile: Module = { namespaced, state, getters, actions, mutations };
這里我們就完成了Vuex的配置了,就可以結合裝飾器對vuex進行調用,而且具有靜態類型提示,十分方便。
完成了這一系列的配置我們的嘗試已經完成,自己寫了個簡單的demo,有興趣可以觀看github怎么配置。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95289.html
摘要:哪吒別人的看法都是狗屁,你是誰只有你自己說了才算,這是爹教我的道理。哪吒去他個鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運,我不曉得。我只曉得,不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 1968·2021-11-23 09:51
閱讀 879·2021-11-19 09:40
閱讀 836·2021-10-27 14:20
閱讀 5026·2021-10-09 09:52
閱讀 3304·2021-10-09 09:44
閱讀 1732·2021-10-08 10:05
閱讀 5088·2021-09-09 11:47
閱讀 3483·2019-08-30 12:47
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要