django項目如何連接前端_工作筆記前端小白如何搭建前端項目

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

f4ab9d6fc358c2035cf11549d31f0cdc.png

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

    90ecf0aca7d9ce35f391870b72eb29a1.png

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

b016cb6b7c3f989e76aa9008bb08182a.png

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

3cc8fe902e6b54992635a3077df1bfb0.png

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

dd46e3743cda0f9c85a1064fdd5dc444.png

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因為我們需要在這里配置跨域代理。

      1. devServer.host:localhost ? 主機地址

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

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

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

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

        1. “/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 原理及源碼筆記

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/529012.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/529012.shtml
英文地址,請注明出處:http://en.pswp.cn/news/529012.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

mysql編碼轉換工具_mysql編碼轉換搞定

按照下面做法,終于成功了!慶祝,紀念......背景:某個系統的mysql數據庫dnname采用默認的latin1字符集,系統升級需要將所有數據轉換成utf-8格式,目標數據庫為newdbname(建庫時使用utf8)方法一:步驟…

python基礎面試都問什么問題_基本 Python 面試問題

def Stack(object): def __init__(self): self.stack [] def push(self,value): # 進棧 self.stack.append(value) def pop(self): # 出棧 if self.stack: self.stack.pop() else: raise LookupError(stack is empty!) def is_empty(self): # 查看stack是否為空 reture bool(s…

按鈕點擊計數器存入mysql_按鈕點擊數統計計數器(PHP+MYSQL+JS)

公共頁面con.php <?php mysql_connect("localhost:3306","user","password") or die("數據庫連接失敗");mysql_select_db("click") or die("數據表連接失敗");mysql_query("set names gbk");?>…

es6去除重復項_Excel的去除重復項你真的明白原理嗎?淺嘗去除重復項的函數奧秘...

Excel函數學習&#xff1a;悟空百問の009&#xff1a;去除重復項的深入思考我們經常整理一些數據&#xff0c;數據不可以動原數據&#xff0c;又需要進行數據分析處理&#xff0c;整理&#xff0c;數據匯總&#xff0c;如何快速的找到這些重復的值&#xff0c;這成了我們很頭疼…

unit類型是什么?_面試官虛晃一槍:項目中有用過鎖嗎?能解釋一下什么是AQS?...

1 前言鎖是用來控制多個線程訪問共享資源的方式&#xff0c;一般來說&#xff0c;一個鎖能防止多個線程同時訪問共享資源(但是有些鎖可以允許多個線程并發的訪問共享資源&#xff0c;如讀寫鎖)。在以前&#xff0c;Java程序是靠synchronized來實現鎖功能的&#xff0c;而在Java…

瀏覽器里面看到的表單數據映射到python_python爬蟲入門01:教你在 Chrome 瀏覽器輕松抓包...

通過python爬蟲入門&#xff1a;什么是爬蟲&#xff0c;怎么玩爬蟲&#xff1f;我們知道了什么是爬蟲也知道了爬蟲的具體流程那么在我們要對某個網站進行爬取的時候要對其數據進行分析就要知道應該怎么請求就要知道獲取的數據是什么樣的所以我們要學會怎么抓咪咪&#xff01;哦…

sql查詢mysql參數配置_查詢參數配置

示例請求示例http(s)://rds.aliyuncs.com/?ActionDescribeParameters&DBInstanceIdrm-uf6wjk5xxxxxxx&正常返回示例XML 格式此選項設置服務器范圍內的默認填充因子值。提供填充因子是為了優化索引數據存儲和性能。fill factor50mssql2008r2此選項設置服務器范圍內的默…

python3類的繼承詳解_基于python3 類的屬性、方法、封裝、繼承詳解

下面小編就為大家帶來一篇基于python3 類的屬性、方法、封裝、繼承實例講解。小編覺得挺不錯的&#xff0c;現在就分享給大家&#xff0c;也給大家做個參考。一起跟隨小編過來看看吧Python 類Python中的類提供了面向對象編程的所有基本功能&#xff1a;類的繼承機制允許多個基類…

linux本地mysql與服務器同步數據_linux下指定mysql數據庫服務器主從同步的配置實例...

一、 概念&#xff1a;① 數據庫同步 (主從同步 --- 主數據庫寫的同時 往從服務器寫數據)② 數據庫同步 (主主同步 --- 兩臺數據庫服務器互相寫數據)二、 舉例數據庫服務器(A) 主數據庫 IP&#xff1a;192.168.1.134數據庫服務器(B) 主數據庫 IP&#xff1a;192.168.1.13…

c#二叉樹 取葉子節點個數_兩種類似但是原理不同的算法求二叉樹的所有葉子節點和...

技術提高是一個循序漸進的過程&#xff0c;所以我講的leetcode算法題從最簡單的level開始寫的&#xff0c;然后到中級難度&#xff0c;最后到hard難度全部完。目前我選擇C語言&#xff0c;Python和Java作為實現語言&#xff0c;因為這三種語言還是比較典型的。由于篇幅和精力有…

所有的service報紅但不報錯_從一個應用報錯來看centos系統的/tmp目錄自動清理規則...

概述分享最近應用碰到的一個奇怪bug&#xff0c;一開始以為是代碼上的問題&#xff0c;找了一段時間發現居然是因為系統的一個自動清理規則導致&#xff0c;下面一起來看看吧~一、應用報錯&#xff1a;logwire.core.exceptions.GeneralUnhandledException: 服務端未處理異常...…

python對瀏覽器的常用操作_Selenium元素的常用操作方法分析

本文實例講述了Selenium元素的常用操作方法。分享給大家供大家參考&#xff0c;具體如下&#xff1a;Selenium是一個用于Web應用程序測試的工具。Selenium測試直接運行在瀏覽器中&#xff0c;就像真正的用戶在操作一樣。支持的瀏覽器包括IE(7, 8, 9, 10, 11)&#xff0c;Mozill…

springboot中接口實例化_AngularJs中控制器的定義,實例化,作用域范圍

AngularJs中控制器的定義&#xff0c;實例化&#xff0c;作用域范圍基于AngularJS入門與進階(江榮波 著)這本書的筆記AngularJS 1.x的demoAngularJS1.x和Angular2,4,5是不一樣的兩個東西&#xff0c;構建方式&#xff0c;語法&#xff0c;都很多不同AngularJs控制器定義與實例化…

高斯核函數參數確定_高斯過程

之前看過高斯過程(GP)&#xff0c;不過當時也沒太看懂&#xff0c;最近花時間認真研究了一下&#xff0c;感覺總算是明白咋回事了&#xff0c;本文基于回歸問題解釋GP模型的思想和方法。文中的想法是自己思考總結得來&#xff0c;并不一定準確&#xff0c;也可能存在錯誤性。為…

uniapp光標自動定義到文本框_特檢自動化行吊靜力檢測方案

主要測量功能使用徠卡測量開發的Windows版數據傳輸軟件&#xff0c;通過藍牙連接徠卡DISTO&#xff0c;經過簡單的測量周期設置&#xff0c;即可實現自動化的距離檢測。測量數據還可以輸出Excel&#xff0c;甚至可以實時發送至PC運行的第三方軟件中&#xff0c;這么強大的軟件還…

安裝python時需要勾選_一體化污水處理設備安裝時需要注意事項

一體化污水處理設備用于處理生活污水和低濃度有機污水&#xff0c;它基本上采用機電完全封閉的結構&#xff0c;不需要專業人員進行管理。它方便且易于清潔&#xff0c;因此引起了很多關注。一體化污水處理設備的安裝方法通常為三種&#xff1a;地埋式&#xff0c;地上式和半地…

oracle驅動maven報錯_在Maven倉庫中添加Oracle JDBC驅動

由于Oracle授權問題&#xff0c;Maven3不提供Oracle JDBC driver&#xff0c;為了在Maven項目中應用Oracle JDBC driver,必須手動添加到本地倉庫。一.首先要得到Oracle JDBC Driver2.通過Oracle的安裝目錄獲得&#xff0c;位置在“{ORACLE_HOME}jdbclibojdbc14.jar”二.手動安裝…

python3.6程序_python3.6如何生成exe程序

PyInstaller的原理簡介PyInstaller其實就是把python解析器和你自己的腳本打包成一個可執行的文件&#xff0c;和編譯成真正的機器碼完全是兩回事&#xff0c;所以千萬不要指望成打包成一個可執行文件會提高運行效率&#xff0c;相反可能會降低運行效率&#xff0c;好處就是在運…

java切片_ java中一個極其強悍的新特性Stream詳解(非常實用)

java8中有兩個非常有名的改進&#xff0c;一個是Lambda表達式&#xff0c;一個是Stream。如果我們了解過函數式編程的話&#xff0c;都知道Stream真正把函數式編程的風格引入到了java中。這篇文章由簡入繁逐步介紹Stream。一、Stream是什么從名字來看&#xff0c;Stream就是一個…

java獲取網絡圖片_有了這50套Java畢設項目(源碼 案例),offer拿到手軟,無償分享...

簡介:又到了開學季&#xff0c;不少人都很是煩惱&#xff0c;手把手教你做Java畢設項目&#xff0c;有教程視頻源碼100套隨意選擇&#xff0c;試試手&#xff01;&#xff01;列舉其中2個系統大綱在線考試系統1&#xff0e;綜述網絡考試系統的項目背景及國內外發展現狀&#xf…