一、環(huán)境準備

1、安裝node.js

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

界面展示

2、檢查node.js版本

查看版本的兩種方式

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

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

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

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

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

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

1、全局安裝vue-cli

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

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

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

查看安裝的版本（顯示版本號說明安裝成功）

• 1|vue --version

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

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

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

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

1.1創(chuàng)建文件

以管理員身份打開命令行界面，進入任意一個想要創(chuàng)建項目的文件夾

輸入：vue create vue01

1.2選擇配置信息

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

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

1.3選擇版本

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

1.4路徑模式選擇

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

1.5語法代碼格式檢查

代碼檢查，選標準的就行，方向鍵切換，空格鍵選擇然后回車

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

1.6第三方文件存在的方式

1.獨立的文件 2.綜合的

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

這里如果選擇保存的話，就要輸入名字，默認就是文件夾的名字，下次配置的時候就會顯示這個文件配置的選項就像上面的一樣，在配置的時候會多出來一個

1.8創(chuàng)建成功

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

1.9運行

cd到項目文件夾下面

cd vue01

輸入代碼運行文件
npm run serve

1.10啟動

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

1.11停止服務(wù)

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

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

2.1進入vue資源管理器界面（vue ui界面）

cmd命令，因為是全局的，所以在哪里打開都行，注意：運行的時候不能關(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啟動運行項目

按步驟來：任務(wù)>serve>運行>啟動

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

• dist 文件夾：默認 npm run build 命令打包生成的靜態(tài)資源文件，用于生產(chǎn)部署
• node_modules：存放npm命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包
• public：有的叫assets：存放項目中需要用到的資源文件，css、js、images以及index
• src文件夾：存放項目源碼及需要引用的資源文件
• src-api文件夾：放ajax相關(guān)操作的代碼文件:index.js(相關(guān)的接口),ajax.js(封裝的axios,攔截器)。有的叫service：自己配置的vue請求后臺接口方法
• src-common文件夾：stylus的混合文件.styl，不要寫到public也可以
• src-components文件夾：存放vue開發(fā)中抽離的一些公共組件
• src-mock文件夾：mock數(shù)據(jù)存放文件及mock模擬接口（沒有后臺接口或接口不完整情況下可以模擬后臺接口）
• src-pages文件夾：涉及到路由的組件
• src-router文件夾:vue-router，路由器及路由的配置
• src-store文件夾：存放 vue中的狀態(tài)數(shù)據(jù)，用vuex集中管理
• App.vue文件：使用標簽渲染整個工程的.vue組件
• main.js文件：vue-cli工程的入口文件
• package.json文件：用于 node_modules資源部 和 啟動、打包項目的 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)境的 端口號、是否開啟熱加載 或者 設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等

總結(jié)

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

最新評論