“前言，來到杭州差不多有兩年左右了，大小小做過不少項目。之前都是有技術大佬在前面抗住、作為菜雞的本人只要在大佬后面聽大佬指揮摸魚劃水就行。最近公司接到一個新項目，由于大佬們紛紛出走，于是搭建前端框架的任務就落到本人的頭上。本來是想選擇react 進行前端開發，但現實由于學藝不精，不得不放棄react采用vue。下面就是使用vue-cli4搭建項目的全過程”

首先 我們安裝vue-cli4，運行 npm install -g @vue/cli( 官網鏈接：https://cli.vuejs.org/zh/)

????2.安裝完成之后，我們需要輸入 vue —version 來查看是否已經全局安裝。

3.?采用自動化安裝vue create yourDemoName 或者使用vue ui使用圖形化界面安裝(安裝配置以及所需插件需看個人需求)

4.安裝完成之后打開文件大概是這樣的，因為我沒有選配置eslint這些。

5.安裝腳手架完成之后我們需要按照我們業務需求來引入所需的庫，這里我引入了vue-router，axios，element-ui，md5。

6.配置vue-router，如果在生成腳手架的過程中已經引入那就跳過這一步。

????6-1.進入src目錄下新建一個router.js (或者建一個router的文件然后里面寫一個index.js)

????6-2.在router.js里面寫配置。

????6-4.在main.js 引入剛剛寫好的router.js

7.配置開發環境變量和模式

???? 7-1.參考官網，我們需要新建配置文件來替換我們的項目根目錄中的下列文件來指定環境變量。

? ? ?7-2.新建一個.env.devolop。根據官網所描述我們的這個環境文件里只能包含環境變量的“鍵=值” key=value，只有以 VUE_APP_?開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。我們可以在我們的項目里使用 process.env.VUE_APP_XXXX。

???? 7-3.我們新建環境配置文件之后，需要在package.json 新建一個scripts的啟動。由于我配置的是本地開發環境，所以我在scripts 下面新增了一行"start": "vue-cli-service serve --mode devolop”。注意這個devolop 要與我們新建的環境文件.env.devolop 的名字要一致，否則訪問不到我們所配置的文件。

8.配置vue.config.js。根據官網描述根目錄下新建一個vue.config.js。具體配置看官網(https://cli.vuejs.org/zh/config/#vue-config-js)

???? 8-1.devServer因為我們需要在這里配置跨域代理。

devServer.host:localhost ? 主機地址

devServer.port:8081? ? ? ? ? 主機端口

devServer.https:false? ? ? ? 是否開啟https

devServer.open:true? ? ? ? ? 是否自動打開瀏覽器

devServer.poxy: {? ? ? ? ? ? ? 跨域代理

“/api”:{

target:process.env.VUE_APP_BASE_URL // 遠端網絡

changeOrigin: true,// 是否開啟跨域

?? ? ? ? pathRewrite: {//對請求路徑進行重定向以匹配到正確的請求地址，

? ? ? ? ? ? '^/api': ''}}

????8-2.引入公共sass文件

vue-cli css: {

? ? loaderOptions: {

? ? ? // 默認情況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效

? ? ? // 因為 `scss` 語法在內部也是由 sass-loader 處理的

? ? ? // 但是在配置 `prependData` 選項的時候

? ? ? // `scss` 語法會要求語句結尾必須有分號，`sass` 則要求必須沒有分號

? ? ? // 在這種情況下，我們可以使用 `scss` 選項，對 `scss` 語法進行單獨配置

? ? ? scss: {

? ? ? ? prependData: `@import "@/scss/main.scss";`

? ? ? },

? ? }

? }

9.引入axios?

???? 9-1.重寫axios方法，之前我們已經開啟跨域代理，所以我們得把axios的baseurl設置為"/api"

這樣子我們的一個前端項目就搭建完畢了，還有各種需要我們自動配置的需要我們根據實際需求來定制．具體demo請查看?https://gitee.com/qianluoshui/vue-demo

別問我為啥不上github，因為懶。

如果各位大佬覺得本文不錯，請???關注??我，您的關注是我下篇推文最大的動力。雖然下一篇推文也不知道什么時候能出來。

大佬們如果想看java干貨，請關注? 劉志航? ?滿滿的java干貨，而且每周固定推送嗷

?是 他最新推送

線程池 ThreadPoolExecutor 原理及源碼筆記

總結

以上是生活随笔為你收集整理的django项目如何连接前端_工作笔记前端小白如何搭建前端项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。