在vue cli3 0中使用typescript

2022-06-27 16:51:13 字數 1455 閱讀 9191

基於vue專案已搭建完成。

1.在根目錄下建立tsconfig.json，基本配置

1


,//路徑的別名   @表src27     "typeroots": ["node_modules/@types"]28}


29 }

2.在根目錄新增tslint.json，ts編碼習慣校驗規則，

1


,11   "rules": 


64 }

3.根目錄下新增images.d.ts  編譯中支援的格式

4.src下面新增vue-shim.d.ts

1 declare module "*.vue"

5.對main.ts的改造

import vue from "vue";


import vuex from 'vuex'


//引入路由


import router from "./router"; //


//引入element


import elementui from "element-ui";


import "element-ui/lib/theme-chalk/index.css";


import "./element-variables.scss";


import "./assets/css/changeelement.scss";


//樣式初始化


import "./assets/css/common.scss";


//iconfont


import "./assets/css/font/iconfont.css";


import aftablecolumn from "af-table-column";


import * as echarts from 'echarts';


import store from "@/services/global-store";


vue.prototype.$echarts =echarts


vue.use(vuex)


vue.use(aftablecolumn);


vue.use(elementui);


vue.config.productiontip = false


;new


vue({


router,


store,


6.元件中的使用

vue cli 3 0 使用全過程講解

2018年8月13日更新 恭祝vue cli 3.0.0 官方正式版發布，此後我們可以正式在3.0環境下進行專案開發了。首先在使用vue create my project建立專案的時候要選擇使用 css 預處理器。首先使用 npm 安裝 vue cli v3.0。npm install g vue...

vue cli 3 0 使用全過程講解

2018年8月13日更新 恭祝vue cli 3.0.0 官方正式版發布，此後我們可以正式在3.0環境下進行專案開發了。首先在使用 vue create my project建立專案的時候要選擇使用 css 預處理器。首先使用 npm 安裝 vue cli v3.0。npm install g vu...

Vue cli3 0版本安裝使用

在這裡說明一下，vue腳手架版本，和vue版本是兩個東西 怎麼看你的vue的腳手架版本呢 cmd 命令列 vue v注意v為大寫 vue cll 官網 安裝 npm install g vue cli vue v 檢測一下版本 1，安裝 vue create 專案名 前面的那些無需打理 走個預設的 ...