從0搭建vue後台管理專案到頸椎病康復指南(一)

2021-09-13 08:10:35 字數 2087 閱讀 5437

首先你需要一台電腦,建議做開發的電腦最好是記憶體 8g 以上16g最佳,土豪隨意。

node標準穩定版, 不建議使用最新的測試版本,緣由是因為最新的測試版本總有各種各樣的奇葩bug,會導致啟動專案的時候報各種錯誤,最關件的是,這些問題很難定位,更別提解決了,npm建議公升級到最新版

chrome瀏覽器,chrome瀏覽器的除錯外掛程式,真心友好。

本次搭建主要採用 

1. vue 2

2. vue router

3. vuex

4. axios

5. elementui

6. webpack

7. node

mkdir vue-cli-project // 建立vue專案資料夾

cd .vue-cli-project // 進入vue專案資料夾

npm i -g cnpm // 全域性安裝cnpm (**映象)

npm i -g vue-cli // 安裝vue腳手架

2.建立完專案資料夾後,首先初始化專案 # vue init [vue-cli模板名稱] [專案資料夾]

出現如下圖所示,即表示專案初始化完成

接下來安裝依賴

2.現在我們的專案已經初步搭建完成,可以嘗試執行 npm run dev 測試執行是否正常。如果在瀏覽器能看到下圖的畫面,標識我們截至目前搭建的一切都正常

專案執行起來碰到第乙個坑, 我們在npm run dev的時候發現,我們的**跑起來之後發現並沒有幫我們自動開啟瀏覽器,在這裡我們需要修改webpack.json檔案中的乙個值, 找到script 行,在dev後面加上--open 這樣我們在跑起來**後會自動幫我們開啟瀏覽器。

先講講為什麼要規範我們的專案資料夾。

我們在搭建乙個專案,一般情況下會有公共的方法檔案(tools.js),靜態資源(,字型,字型圖示),專案配置檔案,webpack打包後的資料夾(打包時會自動生成), 業務檔案等,如果都放在一起了,如果改某個檔案,很難找,真的很亂,(吐槽神略500+字)......

專案檔案結構

├─build                 # build指令碼,主要用於打包和執行某環境的配置指令碼

├─config # 配置執行指令碼的配件檔案

├─src # **資源資料夾

│ ├─assets # 靜態資源資料夾

│ ├─components # 全域性元件檔案

│ ├─lib # 工具類

│ ├─locale # 國際化i18n配置資料夾

│ ├─router # 路由配置資料夾

│ ├─store # vuex 配置wen'jian'jia

│ ├─style # 全域性樣式配置資料夾

│ └─views # 業務資料夾

└─static # 外部靜態配置檔案

這樣我們的檔案目錄就搭建好了,接下來我們就來具體實現一下具體的配置

react 從0開始超詳細搭建後台管理專案

從0開始,一步步 詳解搭建過程.搭建乙個後台管理專案,有用到antd,裝飾器等,具體看技術棧.命令列中執行 或者這樣就建立好了乙個專案,目錄如下,瀏覽器上訪問http localhost 3000出現react動畫就說明建立成功 yarn add react router dom prop type...

從0開始搭建基礎後台框架

很多人會想tp5後台的通用框架很多,為何還要自己去造輪子呢,用著不香嗎?我想說的是不香,每乙個框架的ui包括裡面的外掛程式呢,引用的都不是很全面,有的過於臃腫,有的過於簡單,反正不滿意,那麼我就只能自己動手造了,這個框架呢,目的就是為了以後公司開發產品方便,方便自己去動手做一些自己喜歡的東西 框架採...

vue 從零搭建專案

本地開發需要哪些工具 node.js 4.x,6.x preferred 以及npm包管理器。可以使用國內 的cnpm webpack前端構建工具,將vue 模板編譯打包處理的工具 webpack是當下最熱門的前端資源模組化管理和打包工具,它可以將很多鬆散的模組按照以來以及一定的規則打包成符合生產環...