vue cli 腳手架 安裝

2022-07-16 13:24:08 字數 2119 閱讀 4514

一、 node安裝

1)如果不確定自己是否安裝了node,可以在命令列工具內執行: node -v  (檢查一下 版本);

注 :安裝 vue-cli 腳手架目前需要node版本為 v4.0 以上;

二、 vue-cli 全域性安裝

命令列執行 : npm install -g vue-cli    // 加-g是安裝到全域性

安裝完成以後 可以輸入命令 :vue 回車,可以看到針對vue的命令列;

**:如果npm

在國內的網路環境下可能會比較慢,解決方案:

使用**映象:

1>.****:

;2>.安裝:npm install cnpm -g --registry=  注意:安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重新開啟,安裝完直接使用有可能會出現錯誤;

3>.注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm(以下操作將以cnpm代替npm)。

4> 如何更新npm的方法:  可以使用 npm install -g npm 來更新版本

三、初始化專案

執行命令: vue init webpack demo(你新建的專案名稱/檔名稱)

執行之後將會 自動初始化乙個資料夾 :demo

手動開啟demo資料夾 可以看到 已經初始化好了 乙個基本的專案:

四、啟動專案

如上圖所示,執行初始化專案以後,下面會有對應的命令:

繼續執行: cd demo (這是進入到demo資料夾的命令)

然後執行 安裝 :npm install

安裝完成之後再執行命令: npm run dev 

整個專案就已經啟動了:

五、專案檔案配置介紹

build 和 config  是關於webpack的配置,裡面包括一些server,和埠;

node_modules: 安裝依賴**庫;

src :  存放原始碼;

static:存放第三方靜態資源的,static裡面的.gitkeep,如果為空,也可以提交到github上面,正常情況下,是不可以提交的。

.babelrc:把es6檔案編譯成es5

.babelrc檔案

.editorconfig:編輯器的配置

.editorconfig

charset = utf-8 //

編碼indent_style = space //

縮排風格,基於空格做縮排

indent_size = 2 //

縮排大小是2格

end_of_line = lf //

換行符的風格

insert_final_newline = true

//當你建立乙個檔案,會自動在檔案末尾插入新行

trim_trailing_whitespace = true

//自動移除行尾多餘空格

.eslintignore 忽略語法檢查的目錄檔案

就是忽略對build/*.js和 config/*.js

package.json :  

,

"dependencies": ,

"devdependencies": ,

"engines": ,

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"]

}

入口檔案: index.html    和 main.js

vue cli腳手架安裝

映象使用方法 三種辦法任意一種都能解決問題,建議使用第三種,將配置寫死,下次用的時候配置還在 1.通過config命令 npm config set registry npm info underscore 如果上面配置正確這個命令會有字串response 2.命令列指定 npm registry ...

vue cli腳手架安裝

2.執行cmd,檢視版本號 出現版本號說明安裝成功 輸入 node v 檢視node版本號 需要在6.9以上 輸入 npm v 檢視npm版本號 需要在3.10以上 3.命令列工具 在cmd裡安裝 全域性安裝 vue cli npm install global vue cli mac機全域性安裝需...

安裝腳手架vue cli

cnpm install global vue cli要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。可以使用 vue init webpack my project初始化乙個專案,或使用 vue init webpack my project執行初始化命令的時候回讓使用者輸入幾...