一、環(huán)境準(zhǔn)備

1、安裝node.js

下載地址：https://nodejs.org/zh-cn/

界面展示

2、檢查node.js版本

查看版本的兩種方式

• 1|node -v
• 2|node -version

出現(xiàn)版本號(hào)則說明安裝成功（最新的以官網(wǎng)為準(zhǔn)）

3、為了提高我們的效率，可以使用淘寶的鏡像源

• 輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝npm鏡像源
• 以后再用到npm的地方直接用cnpm來代替就好了，因?yàn)闆]有鏡像源的話，安裝速度比較慢

檢查是否安裝成功：cnpm -v

二、搭建vue環(huán)境

1、全局安裝vue-cli

這里注意：安裝vue-cli對(duì)node.js的版本是有要求的

裝的兩種方式：輸入cmd命令

• 1|npm install -g @vue/cli //這個(gè)是從國(guó)外下載的比較慢
• 2|cnpm install -g @vue/cli //這個(gè)是從鏡像源下載

查看安裝的版本（顯示版本號(hào)說明安裝成功）

• 1|vue --version

如果你原來有版本或者版本比較低，可以升級(jí)

• 1|npm update -g @vue/cli 
• 2|yarn global upgrade --latest @vue/cli

三、創(chuàng)建vue項(xiàng)目

1、用cmd命令創(chuàng)建項(xiàng)目

1.1創(chuàng)建文件

以管理員身份打開命令行界面，進(jìn)入任意一個(gè)想要?jiǎng)?chuàng)建項(xiàng)目的文件夾

輸入：vue create vue01

1.2選擇配置信息

通過上下方向鍵選擇對(duì)應(yīng)配置，然后回車

按空格鍵選擇要安裝的配置資源，帶 * 號(hào)說明被選上了

1.3選擇版本

上下方向鍵選擇版本，這里我們選擇vue2，然后回車

1.4路徑模式選擇

這里可以不用管，直接輸入 no/n

1.5語法代碼格式檢查

代碼檢查，選標(biāo)準(zhǔn)的就行，方向鍵切換，空格鍵選擇然后回車

代碼檢查時(shí)間，方向鍵切換，空格鍵選擇然后回車

1.6第三方文件存在的方式

1.獨(dú)立的文件 2.綜合的

1.7是否保存本次配置信息（保存預(yù)設(shè)）

這里如果選擇保存的話，就要輸入名字，默認(rèn)就是文件夾的名字，下次配置的時(shí)候就會(huì)顯示這個(gè)文件配置的選項(xiàng)就像上面的一樣，在配置的時(shí)候會(huì)多出來一個(gè)

1.8創(chuàng)建成功

Successfully created project vue01出現(xiàn)這個(gè)說明創(chuàng)建成功

1.9運(yùn)行

cd到項(xiàng)目文件夾下面

cd vue01

輸入代碼運(yùn)行文件
npm run serve

1.10啟動(dòng)

在瀏覽器輸入對(duì)應(yīng)的網(wǎng)址就可以看到界面啦
http://localhost:8080/

1.11停止服務(wù)

兩下Ctrl+C 或者Ctrl+C一下然后Y

2、用vue資源管理器創(chuàng)建

2.1進(jìn)入vue資源管理器界面（vue ui界面）

cmd命令，因?yàn)槭侨值?，所以在哪里打開都行，注意：運(yùn)行的時(shí)候不能關(guān)閉cmd窗口，不然就停止服務(wù)了，如果電腦太卡，可以直接在瀏覽器輸入：http://localhost:8000/
vue ui

2.2創(chuàng)建文件

這里直接create 創(chuàng)建文件

2.3配置信息

和用cmd命令差不多，填完之后下一步

2.4配置預(yù)設(shè)

選擇預(yù)設(shè)，或者自定義，然后下一步完成創(chuàng)建

2.5啟動(dòng)運(yùn)行項(xiàng)目

按步驟來：任務(wù)>serve>運(yùn)行>啟動(dòng)

四、Vue-cli工程中每個(gè)文件夾和文件的用處

• dist 文件夾：默認(rèn) npm run build 命令打包生成的靜態(tài)資源文件，用于生產(chǎn)部署
• node_modules：存放npm命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包
• public：有的叫assets：存放項(xiàng)目中需要用到的資源文件，css、js、images以及index
• src文件夾：存放項(xiàng)目源碼及需要引用的資源文件
• src-api文件夾：放ajax相關(guān)操作的代碼文件:index.js(相關(guān)的接口),ajax.js(封裝的axios,攔截器)。有的叫service：自己配置的vue請(qǐng)求后臺(tái)接口方法
• src-common文件夾：stylus的混合文件.styl，不要寫到public也可以
• src-components文件夾：存放vue開發(fā)中抽離的一些公共組件
• src-mock文件夾：mock數(shù)據(jù)存放文件及mock模擬接口（沒有后臺(tái)接口或接口不完整情況下可以模擬后臺(tái)接口）
• src-pages文件夾：涉及到路由的組件
• src-router文件夾:vue-router，路由器及路由的配置
• src-store文件夾：存放 vue中的狀態(tài)數(shù)據(jù)，用vuex集中管理
• App.vue文件：使用標(biāo)簽渲染整個(gè)工程的.vue組件
• main.js文件：vue-cli工程的入口文件
• package.json文件：用于 node_modules資源部 和 啟動(dòng)、打包項(xiàng)目的 npm 命令管理
• build 文件夾：用于存放 webpack 相關(guān)配置和腳本。開發(fā)中僅 偶爾使用 到此文件夾下 webpack.base.conf.js 用于配置 less、sass等css預(yù)編譯庫，或者配置一下 UI 庫
• config 文件夾：主要存放配置文件，用于區(qū)分開發(fā)環(huán)境、線上環(huán)境的不同，常用到此文件夾下 config.js 配置開發(fā)環(huán)境的 端口號(hào)、是否開啟熱加載 或者 設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對(duì)路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等

總結(jié)

到此這篇關(guān)于手把手教你搭建一個(gè)vue項(xiàng)目的完整步驟的文章就介紹到這了,更多相關(guān)搭建vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論