之前我們做的vue專案都是用的2.0的腳手架，但3.0的腳手架出來後，讓我們使用起來確實很不順利，比如在3.0的腳手架中加入了裝飾器，還是用了typescript語法，對於像不喜歡typescript語法的人來說，這種感覺確實是很難受。但是對你來說，同樣是個挑戰，如果你喜歡typescript的語言，那你對你來說，這種腳手架確實可以提升你的水平，那麼接下來，我們看一下vue+typescript+vuex。

首先我們看一下安裝vue3.0腳手架，在安裝之前先解除安裝2.0的腳手架：

先解除安裝vue2.0的腳手架：npm uninstall vue-cli -g，全域性解除安裝

安裝vue3.0的腳手架： npm install -g @vue/cli，全域性安裝

然後建立專案：vue create my_project；選擇第二個(Manually select features)，下箭頭，回車

進入下個頁面，使用空格鍵選中，使用上下箭頭跳到選項中。以下選中：

進入下一個選項，按照下面圖片進行選擇：

安裝完成後，使用cd 建立的資料夾（比如我的：cd my_project）,然後使用npm run serve啟動執行專案。

專案自己配置vue.config.js，如下圖：

以上配置完，則開始寫專案。

我們在進入專案的時候，.vue裡面的寫法結構還是由

在之前我們在做專案的時候除了style裡面我們需要scss的時候，我們就去宣告他，其實同樣的道理，我們在使用

我們在vue-property-decorator中引入我們組建內需要的裝飾器，其中包含{ Component,Vue, watch, Emit, prop}等裝飾器

然後匯出我們的.vue檔案。比如我在這裡匯出註冊頁面元件export default class Register extends Vue {}，這就是一個.vue的整體結構完成。

我們接下來看裝飾器

1、@component({})，

裡面註冊元件，放到export default class Register extends Vue {}的外面，寫法如下：@Component({conponents:{裡面是使用import匯入的元件}})，和vue2.0的腳手架引入相同

2、@Watch()

watch監聽事件，主要監聽某個值的變化，在這裡我將其與computed一起使用，寫法如下：

計算屬性寫法：

1. get successChange() {
2. return this.success
3. }

監聽寫法，將監聽的方法定義為私有或者共有的方法：

1. @Watch('success')
2. private successChanges() {
3. if (this.successChange !== '') {
4. alert(this.successChange);
5. if (this.successChange === '註冊成功') {
6. this.$router.push('/')
7. }
8. }
9. }

3、@Emit()

子元件的寫法：

1. private Byval() {
2. this.$emit('searchQuery')
3. }

父元件接收：

1. @Emit()
2. private queryVal() {
3. alert('查詢')
4. }
5. private deleteVal() {
6. alert('shanchu')
7. }

4、@Prop()

使用自定義屬性傳值

@Prop() private buttonVal!: any;

父級元件：

1. <Buttonfile :buttonVal="searchButton" @searchQuery="queryVal"></Buttonfile>
2. <Buttonfile :buttonVal="deleButton" @searchQuery="deleteVal"></Buttonfile>

1. private searchButton: any = { text: '查詢' };
2. private deleButton: any = { text: '刪除' };

本章講述到.vue檔案的寫法，下章我們繼續typescript+vuex的寫法。

【推薦】

前端共享部落格 http://sharedblog.cn/

網站建站知識http://iqzhan.com/category-10.html

內容分享http://www.qiongsu.cn/