從0搭建vue后臺(tái)管理項(xiàng)目到頸椎病康復(fù)指南（一）

fyber 發(fā)布于2019-08-23 12:22 / 631人閱讀

摘要：搭建項(xiàng)目前準(zhǔn)備工作首先你需要一臺(tái)電腦，建議做開發(fā)的電腦最好是內(nèi)存以上最佳，土豪隨意。技術(shù)棧本次搭建主要采用開始搭建創(chuàng)建項(xiàng)目文件夾個(gè)人比價(jià)喜歡使用創(chuàng)建文件夾，畢竟接下來(lái)下載官方腳手架還是的用。

網(wǎng)上搜索了很久Vue項(xiàng)目搭建指南，并沒(méi)有找到寫的比較符合心意的，所以打算自己擼一個(gè)指南，集合眾家之所長(zhǎng)(不善于排版，有點(diǎn)逼死強(qiáng)迫癥，如果覺(jué)得寫的有問(wèn)題，可以留言斧正，覺(jué)得寫的太差的，可以留言哪里差，有不好的地方改，歡迎調(diào)侃)。

搭建項(xiàng)目前準(zhǔn)備工作

首先你需要一臺(tái)電腦，建議做開發(fā)的電腦最好是內(nèi)存 8G 以上16G最佳，土豪隨意。

Node標(biāo)準(zhǔn)穩(wěn)定版，不建議使用最新的測(cè)試版本，緣由是因?yàn)樽钚碌臏y(cè)試版本總有各種各樣的奇葩BUG，會(huì)導(dǎo)致啟動(dòng)項(xiàng)目的時(shí)候報(bào)各種錯(cuò)誤，最關(guān)件的是，這些問(wèn)題很難定位，更別提解決了，npm建議升級(jí)到最新版

vscode編輯器，啟動(dòng)速度快，缺點(diǎn)插件需要自己下載。

chrome瀏覽器，chrome瀏覽器的調(diào)試插件，真心友好。

技術(shù)棧

本次搭建主要采用 
1. Vue 2 
2. Vue Router 
3. Vuex 
4. axios 
5. elementUI 
6. webpack 
7. node

開始搭建

1.創(chuàng)建項(xiàng)目文件夾個(gè)人比價(jià)喜歡使用cmd創(chuàng)建文件夾，畢竟接下來(lái)下載vue-cli官方腳手架還是的用。

mkdir vue-cli-project // 創(chuàng)建vue項(xiàng)目文件夾        
cd .vue-cli-project // 進(jìn)入vue項(xiàng)目文件夾
npm i -g cnpm // 全局安裝cnpm （淘寶鏡像）
npm i -g vue-cli // 安裝vue腳手架

2.創(chuàng)建完項(xiàng)目文件夾后，首先初始化項(xiàng)目 # vue init [vue-cli模板名稱] [項(xiàng)目文件夾]

vue init webpack

出現(xiàn)如下圖所示，即表示項(xiàng)目初始化完成

接下來(lái)安裝依賴

cnpm i

2.現(xiàn)在我們的項(xiàng)目已經(jīng)初步搭建完成，可以嘗試運(yùn)行 npm run dev 測(cè)試運(yùn)行是否正常。如果在瀏覽器能看到下圖的畫面，標(biāo)識(shí)我們截至目前搭建的一切都正常

項(xiàng)目運(yùn)行起來(lái)碰到第一個(gè)坑，我們?cè)趎pm run dev的時(shí)候發(fā)現(xiàn)，我們的代碼跑起來(lái)之后發(fā)現(xiàn)并沒(méi)有幫我們自動(dòng)打開瀏覽器，在這里我們需要修改webpack.json文件中的一個(gè)值，找到script 行，在dev后面加上--open 這樣我們?cè)谂芷饋?lái)代碼后會(huì)自動(dòng)幫我們打開瀏覽器。

規(guī)范項(xiàng)目文件夾

先講講為什么要規(guī)范我們的項(xiàng)目文件夾。
我們?cè)诖罱ㄒ粋€(gè)項(xiàng)目，一般情況下會(huì)有公共的方法文件（tools.js），靜態(tài)資源（圖片，字體，字體圖標(biāo)），項(xiàng)目配置文件，webpack打包后的文件夾（打包時(shí)會(huì)自動(dòng)生成），業(yè)務(wù)文件等，如果都放在一起了，如果改某個(gè)文件，很難找，真的很亂，（吐槽神略500+字）......

項(xiàng)目文件結(jié)構(gòu)

├─build                 # build腳本，主要用于打包和運(yùn)行某環(huán)境的配置腳本
│      
├─config                # 配置運(yùn)行腳本的配件文件
│                  
├─src                   # 代碼資源文件夾
│  ├─appConfig          # 業(yè)務(wù)配置文件夾，一般情況下存放的是，外部鏈接，請(qǐng)求api，全局組件統(tǒng)一配置文件等
│  ├─assets             # 靜態(tài)資源文件夾
│  ├─components         # 全局組件文件
│  ├─lib                # 工具類
│  ├─locale             # 國(guó)際化I18N配置文件夾
│  ├─router             # 路由配置文件夾
│  ├─store              # Vuex 配置wen"jian"jia
│  ├─style              # 全局樣式配置文件夾
│  └─views              # 業(yè)務(wù)文件夾
└─static                # 外部靜態(tài)配置文件

這樣我們的文件目錄就搭建好了，接下來(lái)我們就來(lái)具體實(shí)現(xiàn)一下具體的配置