先來了解一下開發環境,測試環境,生產環境:
開發環境:就是程序猿(媛)們專門用于開發的環境。配置可以比較隨意, 為了開發調試方便,一般打開全部錯誤報告。
生產環境:是指正式提供對外服務的服務器,上線的項目都必須上傳到這里。一般會關掉錯誤報告,打開錯誤日志。
測試環境:克隆一份生產環境的配置,測試妹子的工作環境。一個程序在測試環境工作不正常,那么肯定不能把它發布到生產機上。
目錄解析:
build —— 構造
build.js —— 生產環境構建操作
check-versions.js —— 版本檢查(npm,node)
utils.js —— 相關工具的構建(各種loader)
vue-loader.conf.js —— .vue文件 解析 配置 加載
webpack.base.conf.js —— webpack基礎配置
webpack.dev.conf.js —— webpack開發環境配置
webpack.prod.conf.js —— webpack生產環境構建配置
config —— 配置
dev.env.js —— 開發環境變量
index.js —— 開發環境的配置(設置端口,自動打開瀏覽器……)
prod.env.js —— 生產環境變量
node_modules —— 模塊依賴
……………………………………(都是一些項目依賴包,別人接手你的項目的時候,千萬不要把這個文件夾復制給別人。。。)
src —— 項目路徑
(我們的項目)
api —— 后臺接口文件夾
common —— 通用資源文件夾(圖片,字體,樣式……)
components —— 非路由組件文件夾
filter —— 自定義過濾器文件夾
mock —— 模擬數據接口文件夾
router —— 路由文件夾
store —— VueX配置文件夾
pages —— 路由組件文件夾
App.vue —— 父組件
main.js —— 項目入口文件
static —— 靜態資源
全局樣式,圖片……
.gitkeep —— 即使你這個文件夾里什么都沒有,也會被git傳上去<br/><br/>
.babelrc —— babel (ES6轉ES5)
.editorconfig ——各種編輯器代碼風格配置
.gitignore —— 版本控制
.postcssrc —— CSS打包兼容
index.html —— 經過我們一手開發的傳說中的SPA
package.json —— 項目依賴模塊說明書(還可以配置某些npm命令)
package-lock.json —— 同上 只不過給各種依賴包標明了版本號 目的是防止依賴包版本不同出現不同運行結果
README.md —— 你可以在這里鍵入你任何想對老板說的話
VS Code開發Vue推薦插件
??Auto Close Tag —— 自動閉合HTML/XML標簽
??Auto Rename Tag —— 自動完成另一側標簽的同步修改
??Chinese (Simplified) Language Pack for Visual Studio Code —— VS中文語言包
??JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入,除js外還支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各種包含js代碼文件的時間
??Path Intellisense —— 自動路徑補全
??Vetur —— 語法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化選中代碼,兩個Ctrl需要同時按著)
??language-stylus —— stylu語法支持
??Code Runner —— 右鍵運行代碼
VS Code用戶設置推薦
{
"files.autoSave": "afterDelay", —— 自動保存
"editor.wordWrap": "on", ——自動換行
"editor.colorDecorators": true, —— 內聯顏色修飾
"extensions.ignoreRecommendations": true, —— 關閉推薦擴展通知
"emmet.includeLanguages": { —— .vue文件識別HTML標簽
"vue-html": "html",
"vue":"html"
}
"languageStylus.useSeparator": true,
"languageStylus.useBuiltinFunctions": true,
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
}