1. 程式人生 > 實用技巧 >vue專案搭建

vue專案搭建

Vue環境安裝

1、安裝node.js(版本不得低於8)全域性安裝,下載node的連結路徑https://nodejs.org/en/,選擇帶有Current的安裝;步驟只需next next就行,沒有確認的規範;安裝的碟符,你可以自己選擇,之後檢查node是否安裝成功,在cmd輸入node -v(記得帶有空格哦)即可。

安裝成功在cmd檢查 node -v

2、安裝npm 全域性安裝 在cmd中安裝npm ,網路可以的話可以直接安裝npm 直接輸入npm install -g npm ,但是在國內的話很多人選擇利用淘寶映象來安裝npm,輸入 npm install -g cnpm --registry=https://registry.npm.taobao.org 但是同樣伴隨著問題是之後在你使用的過程中有可能出現一些你無法解釋的問題,例如我碰到的是:打包的時候時候老報錯...;在調取後臺介面的時候,無緣無故,報錯......;我也不知道毛問題,後來是一前端大牛告訴我,用什麼cnpm ,不穩定,但是用cnpm,也沒有想得那麼可怕。啊哈哈.....

安裝cnpm 不見紅應該就沒啥問題

檢查是否安裝成功 npm -v

3、安裝webpack全域性安裝 (可不選擇安裝這步也可以) ;如果webpack版本4以上,需要安裝webpack-cli 依賴 ;使用命令工具輸入cnpm install webpack webpack-cli -g 當然有可能安裝完webpack 後會提示你是否安裝webpack-cli 只需回覆 y (yes簡寫)即可,如果跟著提示安裝wbpack-cli不成功或感覺不成功的話,可再次執行cnpm install webpack webpack-cli -g。

檢查webpack是否安裝成功 webpack -v(裡面紅框處為詢問你是否安裝webpack-cli)

4、安裝全域性的vue-cli使用命令工具輸入cnpm install vue-cli -g。

檢查vue-cli 是否安裝成功 vue -V(切記:V 是大寫)

5、上面4步完成後,就可以建立自己的專案了,在命令工具中輸入 vue init webpack vue_cli 建立自己的專案了(vue_cli是自己的專案名);你要放到哪個碟符的資料夾中你要在cmd中找到後輸入建立專案的命令,就可以了。

以下是我進入指定資料夾的路徑截圖(當然進入資料夾的前提是有資料夾,哈哈,調皮一下):

建立專案命令vue init webpack vue_cli 裡面只需next next就行,當然遇到有需填yes或no的,只需要輸入y 就行。

這是你建立專案裡面涉及的內容;

vue_cli:——專案名稱

Project description:——專案描述

Author:——作者

Vue build:——構建模式,一般預設選擇第一種

Install vue-router?:——是否安裝引入vue-router,這裡選是,vue-router是路由元件

Use ESLint to lint your code?:——這裡強烈建議選no 否則你會非常痛苦,eslint的格式驗證非常嚴格,多一個空格少一個空格都會報錯,所以對於新手來說,一般不建議開啟,會加大開發難度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試,可以不用安裝

然後進入指定資料夾執行專案

進入資料夾 cd vue_cli

初始化 cnpm install

執行專案 cnpm run dev

這樣環境建立,專案建立就OK了




參考地址:https://blog.csdn.net/Jackson_ji/article/details/89522360