vue-typescript
摘要：
教你搭建typescript的vue專案
自尤大神去年9月推出vue對typescript的支援後，一直想開箱嘗試vue+ts，最近一個新專案準備入手typescript，也遇到了很多坑，下面就一步步來吧！！！
1. 專案建立和初始化
1.1 安裝腳手架與建立專...
教你搭建typescript的vue專案
自尤大神去年9月推出vue對typescript的支援後，一直想開箱嘗試vue+ts，最近一個新專案準備入手typescript，也遇到了很多坑，下面就一步步來吧！！！
1. 專案建立和初始化
1.1 安裝腳手架與建立專案
全域性安裝 vue-cli腳手架
$ npm install -g @vue/cli 複製程式碼
等待安裝完成後開始下一步，檢查是否安裝成功: Vue -v
1.2. 初始化專案
$ vue create vue-ts 複製程式碼
- 選擇預設的模板
Manully select features
回車後來到選擇外掛 - 選擇外掛
這邊選擇了（Babel、Typescript、Router、Css前處理器、Linter / Formatter 格式檢查、Unit測試框架）
使用鍵盤空格選擇外掛
- 自動檢測typescript（yes）
- 路由模式選擇
是否使用 history模式的路由 （Yes）
- 選擇一個css前處理器 (Sass/SCSS)
- 選擇格式檢查規則（什麼時候進行 tslint 校驗: Line on save）
- 是否儲存這份預設配置？（yes）
選是的話，下次建立一個vue專案，可以直接使用這個預設檔案，而無需再進行新的配置，直接使用選擇的模板建立專案
等待所有的依賴完成
下面這些功能是基於lentoo大神的vuecli3-project的進行升級改造的
2. 通過node來生成元件
安裝chalk
$ npm install chalk --save-dev 複製程式碼
在根目錄中建立一個 scripts 資料夾，
2.1. 通過node來生成元件
新增一個generateComponent.js檔案，放置生成元件的程式碼、
新增一個template.js檔案，放置元件模板的程式碼 template.js檔案
/**
* 將駝峰命名轉為中橫槓例如：PlInputGroup --> pl-input-group
* @param str
*/
function toMiddleLine (str) {
let temp = str.replace(/[A-Z]/g,
function (match) {
return "-" + match.toLowerCase()
});
if (temp.slice(0, 1) === '-') { //如果首字母是大寫，執行replace時會多一個-，這裡需要去掉
temp = temp.slice(1)
}
return temp;
}
/**
* 首字母大寫
* @param {*} str 字串
* @returns
*/
function initialToUp (str) {
return str.slice(0, 1).toUpperCase() + str.slice(1);
}
module.exports = {
vueTemplate: componentName => {
return `<template>
<div class="${toMiddleLine(componentName)}">
${toMiddleLine(componentName)}
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit, Provide, Inject } from 'vue-property-decorator'
@Component({})
export default class ${initialToUp(componentName)} extends Vue {
}
</script>
<style lang="scss" scoped>
@import './style.scss';
.${toMiddleLine(componentName)} {}
</style>`
},
styleTemplate: componentName => {
return `.${toMiddleLine(componentName)} {}`
},
entryTemplate: `import Main from './main.vue'
export default Main
`
}
複製程式碼
generateComponent.js檔案
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${message}`))
const successLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
const { vueTemplate, entryTemplate, styleTemplate } = require('./template')
const generateFile = (path, data) => {
if (fs.existsSync(path)) {
errorLog(`${path}檔案已存在`)
return
}
return new Promise((resolve, reject) => {
fs.writeFile(path, data, 'utf8', err => {
if (err) {
errorLog(err.message)
reject(err)
} else {
resolve(true)
}
})
})
}
log('請輸入要生成的元件名稱、如需生成全域性元件，請加 global/ 字首')
let componentName = ''
process.stdin.on('data', async chunk => {
const inputName = String(chunk).trim().toString()
/**
* 元件目錄路徑
*/
const componentDirectory = resolve('../src/components', inputName)
/**
* vue元件路徑
*/
const componentVueName = resolve(componentDirectory, 'main.vue')
/**
* 入口檔案路徑
*/
const entryComponentName = resolve(componentDirectory, 'index.ts')
/**
* style樣式路徑
*/
const styleComponentName = resolve(componentDirectory, 'style.less')
const hasComponentDirectory = fs.existsSync(componentDirectory)
if (hasComponentDirectory) {
errorLog(`${inputName}元件目錄已存在，請重新輸入`)
return
} else {
log(`正在生成 component 目錄 ${componentDirectory}`)
await dotExistDirectoryCreate(componentDirectory)
// fs.mkdirSync(componentDirectory);
}
try {
if (inputName.includes('/')) {
const inputArr = inputName.split('/')
componentName = inputArr[inputArr.length - 1]
} else {
componentName = inputName
}
log(`正在生成 vue 檔案 ${componentVueName}`)
await generateFile(componentVueName, vueTemplate(componentName))
log(`正在生成 entry 檔案 ${entryComponentName}`)
await generateFile(entryComponentName, entryTemplate)
log(`正在生成 style 檔案 ${styleComponentName}`)
await generateFile(styleComponentName, styleTemplate(componentName))
successLog('生成成功')
} catch (e) {
errorLog(e.message)
}
process.stdin.emit('end')
})
process.stdin.on('end', () => {
log('exit')
process.exit()
})
function dotExistDirectoryCreate (directory) {
return new Promise((resolve) => {
mkdirs(directory, function () {
resolve(true)
})
})
}
// 遞迴建立目錄
function mkdirs (directory, callback) {
var exists = fs.existsSync(directory)
if (exists) {
callback()
} else {
mkdirs(path.dirname(directory), function () {
fs.mkdirSync(directory)
callback()
})
}
}
複製程式碼
配置package.json
"new:comp": "node ./scripts/generateComponent" 複製程式碼
執行 npm / cnpm / yarn run new:comp 生成元件
2.2. 通過node來生成頁面元件
在scripts目錄下新建一個generateView.js檔案
generateView.js檔案
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${message}`))
const successLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
const { vueTemplate } = require('./template')
const generateFile = (path, data) => {
if (fs.existsSync(path)) {
errorLog(`${path}檔案已存在`)
return
}
return new Promise((resolve, reject) => {
fs.writeFile(path, data, 'utf8', err => {
if (err) {
errorLog(err.message)
reject(err)
} else {
resolve(true)
}
})
})
}
log('請輸入要生成的頁面元件名稱、會生成在 views/目錄下')
let componentName = ''
process.stdin.on('data', async chunk => {
const inputName = String(chunk).trim().toString()
/**
* Vue頁面元件路徑
*/
let componentVueName = resolve('../src/views', inputName)
// 如果不是以 .vue 結尾的話，自動加上
if (!componentVueName.endsWith('.vue')) {
componentVueName += '.vue'
}
/**
* vue元件目錄路徑
*/
const componentDirectory = path.dirname(componentVueName)
const hasComponentExists = fs.existsSync(componentVueName)
if (hasComponentExists) {
errorLog(`${inputName}頁面元件已存在，請重新輸入`)
return
} else {
log(`正在生成 component 目錄 ${componentDirectory}`)
await dotExistDirectoryCreate(componentDirectory)
}
try {
if (inputName.includes('/')) {
const inputArr = inputName.split('/')
componentName = inputArr[inputArr.length - 1]
} else {
componentName = inputName
}
log(`正在生成 vue 檔案 ${componentVueName}`)
await generateFile(componentVueName, vueTemplate(componentName))
successLog('生成成功')
} catch (e) {
errorLog(e.message)
}
process.stdin.emit('end')
})
process.stdin.on('end', () => {
log('exit')
process.exit()
})
function dotExistDirectoryCreate (directory) {
return new Promise((resolve) => {
mkdirs(directory, function () {
resolve(true)
})
})
}
// 遞迴建立目錄
function mkdirs (directory, callback) {
var exists = fs.existsSync(directory)
if (exists) {
callback()
} else {
mkdirs(path.dirname(directory), function () {
fs.mkdirSync(directory)
callback()
})
}
}
複製程式碼
配置package.json
"new:view": "node ./scripts/generateView" 複製程式碼
執行 npm / cnpm / yarn run new:view 生成頁面
3. vue與typescript結合
3.1. 首先元件宣告
若對vue-property-decorator庫不瞭解的，請點選 vue-property-decorator 的更多詳解
建立元件如下：
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit, Provide, Inject } from 'vue-property-decorator'
@Component
export default class Test extends Vue {}
</script>
複製程式碼
3.2. data定義
若對ts的基本型別不瞭解的, 請點選typescript中文文件
private listTotal: number = 50
private form: any = {
addText: [],
addTextarea: [],
text: '',
textarea: '',
imgUrl: ''
}
複製程式碼
3.3 props宣告
// align justify 彈性佈局對齊方式
@Prop({default: 'center'})
private align!: string
@Prop({default: 'flex-start'})
private justify!: string
// 千萬不要這樣定義 @Prop private align: string = 'center' ---> 踩
</script>
複製程式碼
3.4 vue生命週期及自定義方法
methods不需要像vue裡面 methods: { text () {return console.log(222)} }
public created (): void {}
public mounted (): void {}
public handleClick () {} // methods定義
複製程式碼
3.5 Watch
// 監聽路由變化
@Watch('$route')
onRouteChanged(route: any, oldRoute: any):void {
console.log(route, oldRoute)
}
複製程式碼
3.6 computed
public get msg () {
return 'from typescript'
}
複製程式碼
3.7 Emit
@Emit('change')
private methodName(x: number, y: string) {
console.log('child to parent a value')
}
複製程式碼
5. 踩坑
5.1 tinymac富文字編輯器的結合ts的使用，tiny中文文件
引入tinymac的時候，會報錯
解決方法：src目錄下面新建一個shims-tinymce.d.ts檔案
declare module 'tinymce/tinymce' 複製程式碼
重新啟動專案就ok了
5.2 主題、樣式、語言配置
- 主題
引入主題報錯import 'tinymce/themes/modern/theme'
可以使用sliver主題
import 'tinymce/themes/silver/theme' 複製程式碼
- 樣式及語言漢化
在public目錄新建的static檔案
2.1 將node_modules/tinymce/skins檔案拷貝到static中
2.2zh_CN.js 下載，拷貝到static檔案中
5.3 引入主題，樣式，語言包
配置如下
public editorInit: any = {
language_url: '/static/zh_CN.js',
language: 'zh_CN',
selector: 'textarea',
skin_url: '/static/skins/ui/oxide',
height: 300,
browser_spellcheck: true, // 拼寫檢查
branding: false, // 去水印
// elementpath: false,//禁用編輯器底部的狀態列
statusbar: false, // 隱藏編輯器底部的狀態列
paste_data_images: true, // 允許貼上影象
plugins: setPlugins,
toolbar: setToolbar,
// 啟用選單欄並顯示如下項 [檔案 編輯 插入 格式 表格]
menubar: 'file edit insert view format table',
// 配置每個選單欄的子選單項（如下是預設配置）
menu: {
file: {
title: 'File',
items: 'newdocument'
},
edit: {
title: 'Edit',
items: 'undo redo | cut copy paste pastetext | selectall'
},
insert: {
title: 'Insert',
items: 'link media | template hr'
},
view: {
title: 'View',
items: 'visualaid'
},
format: {
title: 'Format',
items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'
},
table: {
title: 'Table',
items: 'inserttable tableprops deletetable | cell row column'
}
},
// 覆蓋預設的字型單位為pt
fontsize_formats: '8px 10px 12px 14px 16px 18px 20px 24px 36px',
/**
* 下面方法是為tinymce新增自定義插入圖片按鈕
* 也可以藉助elementui的Upload元件，上傳圖片
*/
images_upload_url: '/api/image', // 上傳圖片介面地址
images_upload_handler: (blobInfo: any, success: any, failure: any) => {
let xhr: any = null
let formData: any = null
xhr = new XMLHttpRequest()
xhr.withCredentials = false
xhr.open('POST', this.$store.state.imgUrl)
xhr.onload = () => {
if (xhr.status < 200 || xhr.status >= 300) {
failure(xhr.status)
return
}
let json = JSON.parse(xhr.responseText)
if (json.code === 0) {
success(json.data[0].newFileName)
} else {
failure('HTTP Error: ' + json.msg)
}
}
formData = new FormData()
formData.append('file', blobInfo.blob(), blobInfo.filename())
xhr.send(formData)
}
}
複製程式碼
附上效果圖：
