基于vue+ant design的saas前端
1. 前期準(zhǔn)備
確保你本地安裝了node挎狸，可以在cmd（終端）上輸入node -v檢查是否安裝寥茫。
若是沒有安裝可以在nodejs官網(wǎng)下載
2. 項(xiàng)目準(zhǔn)備
使用vscode或者其它編輯器打開項(xiàng)目的根目錄
若是在項(xiàng)目的根目錄中沒有node_modules文件夾望艺，則在項(xiàng)目的根目錄中使用指令：
npm install
//或者使用縮寫
npm i
使用上面的指令是為了安裝依賴，安裝成功之后封救，項(xiàng)目中會(huì)多出一個(gè)node_modules文件夾女气。
3. 啟動(dòng)項(xiàng)目
還是在項(xiàng)目的根目錄中使用指令:
npm run serve
提示成功之后打開地址http://localhost:8000/即可啟動(dòng)項(xiàng)目杏慰。
4. 打包項(xiàng)目
npm run build
5. vscode常用插件
vscode中 提供了很多插件能幫助我們快速開發(fā)，當(dāng)然并不是必須的。
安裝插件的入口在vscode窗口的左邊：
推薦幾個(gè)常用的插件：
Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽
Auto Rename Tag 修改HTML標(biāo)簽時(shí)缘滥，自動(dòng)修改匹配的標(biāo)簽
HTML CSS Support css提示（支持vue）
ESLint (eslint語法提示)
Vetur (vue的相關(guān)語法提示)
Mithril Emmet （快速生成html標(biāo)簽）
Mithril Emmet需要在settings.json中配置：
"emmet.triggerExpansionOnTab": true,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
教程：https://www.cnblogs.com/summit7ca/p/6944215.html
6. 快速生成vue模板
這部分教程是教你如何新建了一個(gè)vue文件之后轰胁，快速生成一個(gè)vue模板。
首先你得安裝如上的插件Mithril Emmet
然后打開vscode左下角中的用戶代碼片段：
搜索vue朝扼，然后選擇第一個(gè)Vue赃阀，選擇了之后會(huì)打開一個(gè)vue.json文件，再將一下代碼全部覆蓋文件中的內(nèi)容擎颖。
// vue.json
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class='$1'>$2</div>",
"</template>",
"",
"<script>",
"http:// 這里可以導(dǎo)入其他文件（比如：組件榛斯，工具js，第三方插件js搂捧，json文件驮俗，圖片文件等等）",
"http:// 例如：import 《組件名稱》 from '《組件路徑》';",
"export default {",
" name: '',",
" components: {},",
"http:// 生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前this實(shí)例）",
" created() {",
" ",
" },",
"http:// 生命周期 - 載入后, Vue 實(shí)例掛載到實(shí)際的 DOM 操作完成，一般在該過程進(jìn)行 Ajax 交互",
" mounted() {},",
" data() {",
" return {}",
" },",
"http:// 方法集合",
" methods: {},",
"http:// 計(jì)算屬性",
" computed: {}",
"}",
"</script>",
"",
"<style lang='less' scoped>",
"http:// @import url($2); 引入公共css類",
"</style>"
],
"description": "Log output to console"
}
}
記得保存允跑。
之后你可以在項(xiàng)目隨意位置創(chuàng)建一個(gè)test.vue文件來測試下效果王凑。
如我在view文件夾下創(chuàng)建了一個(gè)test.vue：
在文件中輸入vue之后按Tab鍵就可以快速生成一個(gè)vue模板：
