vue專案搭建

2022-02-10 12:11:21 字數 1891 閱讀 8495

vue環境安裝

安裝成功在cmd檢查  node -v

2、安裝npm 全域性安裝   在cmd中安裝npm ,網路可以的話可以直接安裝npm  直接輸入npm install -g npm  ,但是在國內的話很多人選擇利用**映象來安裝npm,輸入 npm install -g cnpm --registry= 但是同樣伴隨著問題是之後在你使用的過程中有可能出現一些你無法解釋的問題,例如我碰到的是:打包的時候時候老報錯...;在調取後台介面的時候,無緣無故,報錯......;我也不知道毛問題,後來是一前端大牛告訴我,用什麼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

vue專案搭建

前提安裝好node不再贅述 可以在自帶的命令列中執行,也可以在webstome中執行 安裝cnpm npm install g cnpm registry 安裝webpack 這一步可以省略,反正你也不會用 cnpm install webpack g 全域性安裝 vuecnpm install g...

Vue專案搭建

vue cli 專案搭建及常用外掛程式安裝,報錯解決 環境搭建 node v 檢測版本 2.安裝webpack npm install webpack g webpack v 檢測是否安裝成功 專案搭建 1.npm install vue cli g vue v 接下來的步驟有兩種方式 1 cd 進...

vue專案搭建

1 安裝 映象,用cnpm裝東西很省事,目前沒被坑過 一下命令在cmd中完成 可以不按裝 npm install g cnpm registry 2 安裝vue腳手架 cnpm install g vue cli測試是否成功安裝 vue v 3.進入安裝的資料夾目錄,構建檔案結構目錄 vue ini...