Vue Cli3 TypeScript 搭建工程

翘哥發表於 2019-7-24 20:13:00

Vue Cli3出来也一段时间了，我想尝试下Vue结合TypeScript搭建个工程，感受下Vue下用TS...网上有一篇讲的非常详细的教程  vue-cli3.0 搭建项目模版教程（ts+vuex+axios） 作者：陈小生_1017
　　我看完教程后（好长的一篇博文，不得不服作者的用心，赞！），我去博主留的git地址 https://github.com/chenfangsheng/vue-cli3-tpl.git 克隆一份下来，安装完依赖后，发现好多错误...汗...我在原博客评论区和git issue区均为发现问题的解决办法，我尝试着一番google后，项目能跑起来了，顺便研究了下vuex-class的用法，下面会贴出具体的用法。出现的错误有：
　　1.引入scss的路径不对，按照下边改为相对路径就可以了
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/components/test/test.vue 

...
<style lang="scss">
/*@import "@/assets/scss/variables";*/
@import "../../assets/scss/variables";

.test-wrap {
width: 100%;
color: $background-color;
}
</style></pre>
</div>
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/assets/scss/variables.scss

$background-color : #4c94f1;</pre>
</div>
　　为了方便，我们引用scss全局变量，在每一个style标签引入这个公共变量文件太麻烦了，官方有全局引入的方法：
<div class="cnblogs_code">
<pre>// vue.config.js
css: {
modules: false, // 启用 CSS modules
extract: true, // 是否使用css分离插件
sourceMap: true, // 开启 CSS source maps?
 loaderOptions: {
 // 给 sass-loader 传递选项
 sass: {
 // @/ 是 src/ 的别名
 // 所以这里假设你有 `src/assets/scss/variables.scss` 这个文件
 data: `@import "@/assets/scss/variables.scss";`
 }
} // css预设器配置项
},</pre>
</div>
　　2.TS报错: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'LoginState'.  No index signature with a parameter of type 'string' was found on type 'LoginState'
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/store/module/login.ts
// 更改state
const mutations: MutationTree<LoginState> = {
// 更新state都用该方法
UPDATE_STATE(state: LoginState, data: LoginState) {
for (const key in data) {
 if (!data.hasOwnProperty(key)) { return }
 state = data // TS7053错误
 }
}
}</pre>
</div>
　　我们在js中访问对象时，[]中的name的类型必须是string，但是在ts中name的隐式类型为any，所以ts发现没有类型是string的的索引标记。。。解决办法：指定对象中key的类型
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/types/views/login.interface.ts
// VUEX login.State 参数类型
export interface LoginState {
: any
}</pre>
</div>
　　最后贴下我 vuex-class 的使用： 
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/store/index.ts
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// modules
import login from './module/login'
import index from './module/index'

export default new Vuex.Store({
state: {
//
},
mutations: {
//
},
actions: {
//
},
modules: {
login,
index
}
})</pre>
</div>
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/store/module/login.ts
import { LoginState } from '@/types/views/login.interface'
import { GetterTree, MutationTree, ActionTree } from 'vuex'
import * as LoginApi from '@/api/login'

const state: LoginState = {
author: 'edison',
age: 18,
obj: null
}

// 强制使用getter获取state
const getters: GetterTree<LoginState, any> = {
getAuthor: (state: LoginState) => state.author
}

// 更改state
const mutations: MutationTree<LoginState> = {
// 更新state都用该方法
UPDATE_STATE(state: LoginState, data: LoginState) {
for (const key in data) {
 if (!data.hasOwnProperty(key)) { return }
 state = data
}
}
}

const actions: ActionTree<LoginState, any> = {
UPDATE_STATE_ASYN({ commit, state: LoginState }, data: LoginState) {
commit('UPDATE_STATE', data)
},
async GET_DATA_ASYN({ commit, state: LoginState }) {
const result = await LoginApi.getData()
commit('UPDATE_STATE', {'obj': result.data})
return result.data
}
}

export default {
namespaced: true,
state,
getters,
mutations,
actions
}</pre>
</div>
<div class="cnblogs_code">
<pre>// vue-cli3-tpl/src/views/login/login.ts
import { Component, Vue } from "vue-property-decorator"
import {Getter, Action, namespace, State} from "vuex-class"
import { LoginData } from '@/types/views/login.interface'
import { Test } from "@/components" // 组件

const LoginModule = namespace('login')

@Component({
components: {
Test
}
})
export default class About extends Vue {
// Getter
// @Getter login.author

// Action
// 和 @State("author") author 相同
@LoginModule.State('author') author!: string
// 直接映射 @State age
@LoginModule.State age!: number
@LoginModule.State obj!: any

/**
* state映射到组件时，是放在computed下的，因此本身为计算属性
* */
// 只从state获取
@LoginModule.State(state => state.author) author1!: string
// 从 state 和 getters 上获取
@LoginModule.State((state, getters) => state.author + getters.getAuthor) author2!: string

// 内部使用namespace 如果不想在外部使用namespace，可以使用参数传递namespace
@State('author', {namespace: 'login'}) author3!: string

// Getter
@Getter("login/getAuthor") getAuthor!:string;
@Getter("getAuthor",{namespace:"login"}) getAuthor1!:string;
@LoginModule.Getter('getAuthor') getAuthor2!:string;

// Action
@LoginModule.Action GET_DATA_ASYN!: Function
@LoginModule.Action UPDATE_STATE_ASYN!: Function

// data
data: LoginData = {
pageName: 'login'
}

created() {
this.GET_DATA_ASYN()
 .then((data: any) => {
 console.log('data ', data)
 debugger
 })
console.log('state用法')
console.log('this.author ', this.author)
console.log('this.author1 ', this.author1)
console.log('this.author2 ', this.author2)
console.log('this.author3 ', this.author3)
console.log('getter用法')
console.log('this.getAuthor ', this.getAuthor)
console.log('this.getAuthor1 ', this.getAuthor1)
console.log('this.getAuthor2 ', this.getAuthor2)
console.log('this.age ', this.age)
console.log('action用法')
this.UPDATE_STATE_ASYN(
 {
 author: 'edison modified'
 }
)
console.log('modified author ', this.author)
}

activated() {
//
}

mounted() {
//
}

// 初始化函数
init() {
//
}

}</pre>
</div>
　　参考博文：如何使用 vue + typescript 编写页面 ( vuex装饰器部分 ) 
来源：https://www.cnblogs.com/hanshuai/p/11240571.html

頁: [1]

琼殿技术论坛's Archiver

Vue Cli3 TypeScript 搭建工程