[源碼地址](https://github.com/jielanglang/simple-vue)
[項目demo](https://xll.netlify.com/)
# 這里講下使用中注意的事項? 具體的使用在項目源碼中
## 關于typescript詳細配制
[tsconfig配制詳情](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Compiler%20Options.html)
## 關于命令
**`npm run creat [paths...]`**
本人對于不斷的創建組件文件夾已經很煩惱所以參考網上 生成了基于node的腳本！
運行
```shell
npm run creat views/Home
// or
npm run creat components/Home
```
會在對應的文件`views`or`components`夾中生成 `index.ts`,`home.html`,`home.scss`
生成的文件內部都有基本的使用代碼? 如果對這個生成的文件有個人需求 可以參考 項目目錄下的`generator.js` 文件自行修改
## Vue-Property-Decorator
vue-property-decorator 是在 vue-class-component 上增強了更多的結合 Vue 特性的裝飾器，新增了這 7 個裝飾器
- @Emit
- @Inject
- @Model
- @Prop
- @Provide
- @Watch
- @Component (從 vue-class-component 繼承)
## 項目中的語法使用方法
```js
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class App extends Vue {
? name:string = 'Simon Zhang'
? // computed
? get MyName():string {
? ? return `My name is ${this.name}`
? }
? // methods
? sayHello():void {
? ? alert(`Hello ${this.name}`)
? }
? mounted() {
? ? this.sayHello();
? }
}
```
類似vue中的
```js
export default {
? data () {
? ? return {
? ? ? name: 'Simon Zhang'
? ? }
? },
? mounted () {
? ? this.sayHello()
? },
? computed: {
? ? MyName() {
? ? ? return `My name is ${this.name}`
? ? }
? },
? methods: {
? ? sayHello() {
? ? ? alert(`Hello ${this.name}`)
? ? },
? }
}
```
## Vuex-Class
vuex-class是基于基于vue-class-component對Vuex提供的裝飾器。它的作者同時也是vue-class-component的主要貢獻者，質量還是有保證的。
```
npm i vuex-class -S
```
使用方法
```js
import { Component, Vue } from 'vue-property-decorator'
import { State, Action, Getter } from "vuex-class";
@Component
export default class App extends Vue {
? name:string = 'Simon Zhang'
? @State login: boolean;
? @Action initAjax: () => void;
? @Getter load: boolean;
? get isLogin(): boolean {
? ? return this.login;
? }
? mounted() {
? ? this.initAjax();
? }
}
```
類似vue中
```js
export default {
? data() {
? ? return {
? ? ? name: 'Simon Zhang'
? ? }
? },
? mounted() {
? ? this.initAjax()
? },
? computed: {
? ? login() {
? ? ? return this.$store.state.login
? ? },
? ? load() {
? ? ? return this.$store.getters.load
? ? }
? },
? methods: {
? ? initAjax() {
? ? ? this.$store.dispatch('initAjax')
? ? }
? }
}
```
## 支持 mixin
```js
import MixinsType from "@/mixins/xxx";
@Component({
mixins:[MixinsType]
})
```
## 需要注意的事
> 引入部分第三方庫的時候需要額外聲明文件
比如說我想引入vue-lazyload,雖然已經在本地安裝，但是typescript還是提示找不到模塊。原因是typescript是從node_modules/@types目錄下去找模塊聲明，有些庫并沒有提供typescript的聲明文件，所以就需要自己去添加
解決辦法：在`src`目錄下建一個`tools.d.ts`文件，聲明這個模塊即可
```js
declare module 'vue-awesome-swiper' {
? export const swiper: any
? export const swiperSlide: any
}
declare module 'vue-lazyload'
```
> 在需要的window屬性的.ts文件 中添加屬性
```js
declare global {
? interface Window {FileReader:any}
}
window.FileReader = window.FileReader || {}
```
??
