vue cli（vue腳手架）搭建專案

vue-cli 是乙個官方發布 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案。這篇文章將會從實操的角度，介紹整個搭建的過程。

其實這次使用vue-cli的過程並不順利，反覆嘗試幾次都遇到以下這個報錯：

建立vue-cli工程專案時的報錯

在網上查了很多資料才發現原來是node版本過低的問題，雖然沒有找到官方對這個「過低」問題的解釋，但是根據國外網友的經驗之談，應該是至少使用node6，我將node4更新至node8之後確實沒有報錯了，順利搭建。相關答疑帖：

確認node與npm的版本

將這個放在最前面說是希望大家在搭建前，應該先確保將node更新至6以上，這樣能少走一些彎路。下面開始正式介紹整個構建過程。

下面整個過程是基於已經安裝node.js和cnpm的基礎上，node.js如何安裝就不在這裡詳說了。如何全域性化安裝cnpm，這裡簡單提一下：

npm install cnpm -g --registry=

其實對於安裝vue-cli，使用npm命令和cnpm命令都是可以的，個人覺得使用npm安裝的比較慢，而且很可能會因為網路問題而出錯，所以還是覺得使用cnpm穩一點。

全域性安裝 vue-cli ，在命令提示視窗執行：

npm install -g @vue/cli

安裝vue-cli成功後，通過命令建立資料夾，

vue create mydemo

接著就會進入問答環節（選擇一些配置）如果你是第一次使用3.0版本的話，下面的第乙個選項是沒有的可以忽略，只會有後面2個選項（default 是預設配置， manually select features 是自己手動選擇）如果選擇default，一直回車執行下去就行了

確認建立專案後，後續還需輸入一下專案名稱、專案描述、作者、打包方式、是否使用eslint規範**等等，詳見上圖。安裝順利執行後會，生成如下檔案目錄：

生成檔案目錄後，使用 cnpm 安裝依賴：

cnpm install

最後需要執行命令： npm run dev 來啟動專案，

啟動完成後會自動彈出缺省網頁：

到這一步，就算成功利用vue-cli搭建乙個vue專案了，撒花 ~

3.目錄結構及其對應作用

通過vue-cli搭建乙個vue專案，會自動生成一系列檔案，而這些檔案具體是怎樣的結構、檔案對應起什麼作用，可以看看下面的解釋：

├── build/ # webpack 編譯任務配置檔案: 開發環境與生產環境 │ └── ... ├── config/ │ ├── index.js # 專案核心配置 │ └── ... ├ ── node_module/ #專案中安裝的依賴模組 ── src/ │ ├── main.js # 程式入口檔案 │ ├── components/ # 元件 │ │ └── ... │ └── assets/ # 資源資料夾，一般放一些靜態資源檔案 │ └── ... ├── static/ # 純靜態資源 (直接拷貝到dist/static/裡面) ├── test/ │ └── unit/ # 單元測試 │ │ ├── specs/ # 測試規範 │ │ ├── index.js # 測試入口檔案 │ │ └── karma.conf.js # 測試執行配置檔案 │ └── e2e/ # 端到端測試 │ │ ├── specs/ # 測試規範 │ │ ├── custom-assertions/ # 端到端測試自定義斷言 │ │ ├── runner.js # 執行測試的指令碼 │ │ └── nightwatch.conf.js # 執行測試的配置檔案 ├── .babelrc # babel 配置檔案 ├── .editorconfig # 編輯配置檔案 ├── .gitignore # 用來過濾一些版本控制的檔案，比如node_modules資料夾 ├── index.html # index.html 入口模板檔案 └── package.json # 專案檔案，記載著一些命令和依賴還有簡要的專案描述資訊 └── readme.md #介紹自己這個專案的，可參照github上star多的專案。 build/

vue cli（vue腳手架）搭建專案

vue cli（vue腳手架）搭建vue專案

Vue cli vue腳手架安裝

使用Vue cli Vue腳手架快速搭建專案

vue cli（vue腳手架）搭建專案

vue cli（vue腳手架）搭建vue專案

Vue cli vue腳手架 安裝

使用Vue cli Vue腳手架 快速搭建專案

相關推薦

Vue cli vue腳手架安裝

使用Vue cli Vue腳手架快速搭建專案