Vue之腳手架vue-cli相關配置
阿新 • • 發佈：2020-08-17
現在前端工程化開發是現在的一個流程趨勢，藉助一些工具幫助我們搭建一個舒適的開發環境，已經被提上日程
在這裡，介紹一種官方網站推薦的一種工具腳手架--Vue-cil
注意：Vue-cli是要求寫在ode.js版本是8+的一個環境當中
1.安裝腳手架
- 全域性安裝
- npm i -g @vue/cli
- 或者是通過yarn global add vue/cli
- 安裝結束後，可以通過vue -V來檢測安裝是否成功，並且會得到安裝的一個版本
2.通過腳手架建立一個專案
- vue create .（通過 . 可以安裝到當前路徑，也就可以指定安裝的一個檔名）
- 然後根據終端給出的提示，按照自己的需求，通過上下鍵來控制游標上下移動，空格來控制是否選中來進行vue-cli的一個安裝配置
- 配置完成後，會在選中的資料夾中建立以下檔案
3.eslint語法
- vue-cli中會使用一種編寫程式碼的程式碼規範，一旦書寫規範不正確，會在頁面中報錯，如果不習慣使用，可以在vue.config.js中進行關閉使用
- 首先在選中的資料夾中建立一個vue.config.js檔案
module.exports = { devServer: { overlay: { warnings: false, errors: false } }, lintOnSave:false //直接關閉eslint檢查}
4.alias別名設定
- 在我們編寫檔案路徑的時候，往往會頭疼於../到哪，./到哪等，vue-cli中提供了一個符號'@' ，它代表的是建立的檔案中的src資料夾，所以就比如像訪問components中的元件的時候就可以直接@components了
- 通過上面講述，發現提供了@符，還是會覺得麻煩，那我們就可以在vue.config.js檔案中進行一個別名配置了
configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'con': '@/components','views': '@/views', } } }
- 其中con就代表了@/components了，比如上面的我們要訪問其餘元件需要@components/....，現在只需要con/....
5.Vetur
比如用的編輯器如果是vscode的話，我們點開生成的App.vue檔案會發現，整篇文件沒有一點程式碼高亮，這在程式設計師眼前可是忍不了的存在，所以此時我們就需要用到vscode給我們提供的一個外掛了——Vetur
將它安裝好後，就會發現，真香，程式碼效果一眼便知。
6.單檔案元件
官方文件將.vue檔案命名為單檔案元件，是由template，script，style組成，所以我們每建立一個.vue檔案就需要重新寫一遍這些標籤，都是重複程式碼，所以我們可以進行一個自動補齊配置
流程
- 點選檔案進入首選項
- 點選使用者片段
- 點選新建全域性程式碼片段檔案，命名為vue.json
- 進入後把我們不需要的刪了，就可以書寫我們的模板了，把自己想自動生成的，寫入這個檔案
{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）", "//例如：import 《元件名稱》 from '《元件路徑》';", "", "export default {", "//import引入的元件需要注入到物件中才能使用", "components: {},", "data() {", "//這裡存放資料", "return {", "", "};", "},", "//監聽屬性 類似於data概念", "computed: {},", "//監控data中的資料變化", "watch: {},", "//方法集合", "methods: {", "", "},", "//生命週期 - 建立完成（可以訪問當前this例項）", "created() {", "", "},", "//生命週期 - 掛載完成（可以訪問DOM元素）", "mounted() {", "", "},", "beforeCreate() {}, //生命週期 - 建立之前", "beforeMount() {}, //生命週期 - 掛載之前", "beforeUpdate() {}, //生命週期 - 更新之前", "updated() {}, //生命週期 - 更新之後", "beforeDestroy() {}, //生命週期 - 銷燬之前", "destroyed() {}, //生命週期 - 銷燬完成", "activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發", "}", "</script>", "<style lang='scss' scoped>", "//@import url($3); 引入公共css類", "$4", "</style>" ], "description": "Log output to console" } }
-
prefixd 後面跟的是我們輸入的一個快捷短語，在這裡我設定成vue，也可以根據自己喜好設定，此時，我們建立.vue檔案的時候，就可以直接輸入vue然後按下回車，我們縮寫好的模板就生成好了
<!-- --> <template> <div class=''></div> </template> <script> //這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等） //例如：import 《元件名稱》 from '《元件路徑》'; export default { //import引入的元件需要注入到物件中才能使用 components: {}, data() { //這裡存放資料 return { }; }, //監聽屬性 類似於data概念 computed: {}, //監控data中的資料變化 watch: {}, //方法集合 methods: { }, //生命週期 - 建立完成（可以訪問當前this例項） created() { }, //生命週期 - 掛載完成（可以訪問DOM元素） mounted() { }, beforeCreate() {}, //生命週期 - 建立之前 beforeMount() {}, //生命週期 - 掛載之前 beforeUpdate() {}, //生命週期 - 更新之前 updated() {}, //生命週期 - 更新之後 beforeDestroy() {}, //生命週期 - 銷燬之前 destroyed() {}, //生命週期 - 銷燬完成 activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發 } </script> <style lang='scss' scoped> //@import url(); 引入公共css類 </style>
7.資料請求的跨域問題
- 我們在訪問本地檔案的時候是遇不到跨域問題的
- 當我們需要請求一個線上的地址介面的時候，顯然，我們會報錯，因為已經違背了瀏覽器的同源策略，我們可以直接通過後端來進行CORS的配置來解決跨域問題，也可以通過前端代理伺服器的方式來進行
-
devServer: { open:true,//自動開啟瀏覽器 port:8000,//隨便更改埠號 proxy: {//進行配置代理項，解決前端瀏覽器跨域的問題 // 檢索遇到/api的時候進行的操作 '/api': { target:'https://m.maoyan.com',// 目標請求的域名地址 changeOrigin:true, //是否改變 pathRewrite: { //重寫地址 '^/api': '' } } } }
便可以完成代理伺服器的一個配置
- 我們對資料的一個非同步請求，可以在生命週期的created鉤子函式中完成，在這裡我們使用axios方法來進行
// 引入axios import axios from "axios"axios.get("/api/ajax/filterCinemas?ci=10&optimus_uuid=C65FF030043711EAA90DB72AF81017842766AFA17B0B4FC182E45BB02A3963B2&optimus_risk_level=71&optimus_code=10") .then(res=>{ console.log('res===>',res) })
created(){
}
這時，我們也就拿到了我們要請求的資料