vue Cli 腳手架的搭建

2022-08-30 21:36:21 字數 1450 閱讀 2172

1、安裝 node.js  應用

安裝完之後測試是否安裝成功,如圖:

2、全域性安裝 vue - cli

輸入命令符: npm install --global vue-cli

測試是否安裝成功,成功如圖:

3、選擇需要安裝到盤和資料夾,如圖:e:\vue

4、開始建立檔案,並取檔名為 vue-cli-study,並按自己需求選擇

4、執行專案

進入建立的資料夾,然後 npm run dev 開始執行專案,如圖:

另外記錄下 檔案的目錄分別是做什麼用的,**  

一級目錄

build:webpack 配置相關的目錄

config:webpack 配置相關的目錄

node_modules:npm install 安裝的依賴**庫

src:我們存放的原始碼,我們開發的所喲**都放在src目錄下。

staic:存放一些第三方靜態資源的目錄

test:測試目錄,沒有太大用處,可以刪除

一級檔案:

.babelrc:babel的一些配置,(將es6編譯成es5的一些配置)

.editorconfig:編輯器的一些配置(包括編碼格式,縮排風格,換行格式)

.eslintignore:配置我們不會對build檔案和config檔案進行語法檢查。

.eslintrc.js:eslint的配置檔案,主要是定義一些**編寫風格的規則。

.gitignore:配置git倉庫忽略的一些檔案(不會上傳)

index.html:入口html 檔案。

package.json:專案的一些配置資訊(專案的一些具體資訊)

src 資料夾下的 目錄:

搭建vue cli腳手架

前期工作準備 2.安裝 映象,因為我們用的npm的伺服器是外國,有的時候我們安裝 依賴 的時候會超級慢,所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後,就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack,...

搭建vue cli腳手架

腳手架 cd xz vue 先進入專案資料夾 vue create後的那個資料夾 xz vue npm run serve 執行live server babel的效果。是先將腳手架中瀏覽器不懂的 翻譯為瀏覽器能懂的 然後,再將翻譯後的頁面執行在乙個臨時的開發伺服器中。強調 npm run serv...

vue cli腳手架搭建

是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境 依賴等資訊都配置好。檢查npm 版本,建議安裝到最新版本。命令列檢視版本號 node v npm v 公升級npm 可選操作 npm install g npm 修改為 映象 可選操作 npm config set regist...