天天看點

Webpack建立、運作vue.js項目及其目錄結構詳解

項目環境搭建:

1.安裝node

點選下面連結進行下載下傳:

<a href="https://nodejs.org/en/">node官網 https://nodejs.org/en/</a>

版本檢視:

運作指令行 cmd,然後輸入 node -v 檢視node版本:

Webpack建立、運作vue.js項目及其目錄結構詳解

注意:node版本最好新一點好,推薦6.0以上。

2.全局安裝vue-cli

在指令行輸入:

npm install-g vue-cli

3.建立一個基于 “webpack” 模闆的新項目

vue init webpack project-name(預設安裝2.0版本)

vue init webpack#1.0 project-name(安裝1.0版本)

項目目錄結構:

Webpack建立、運作vue.js項目及其目錄結構詳解
Webpack建立、運作vue.js項目及其目錄結構詳解

main.js 是我們的入口檔案,主要作用是初始化vue執行個體并使用需要的插件

App.vue是我們的主元件,所有頁面都是在App.vue下進行切換的。其實你也可以了解為所有的路由也是App.vue的子元件。是以我将router标示為App.vue的子元件。

index.html檔案入口

src放置元件和入口檔案

node_modules為依賴的子產品

config中配置了路徑端口值等

build中配置了webpack的基本配置、開發環境配置、生産環境配置等

運作項目:

1.cd project-name

2.npm install

3.npm run dev

4.在浏覽器輸入localhost:8080

繼續閱讀