day 75vue 腳手架學習腳手架的使用

時間 2019-11-07

標籤 day 75vue vue 腳手架學習使用简体版

原文原文鏈接

前情提要:html

　　　　vue 自定化開發工具 (vue-cli的使用)前端

　　　　一:安裝腳手架,以及準備vue

　　　　1: 下載地址,node

　　　　　　https://nodejs.org/en/download/python

　　　　2:若是下載成功,在cmd 命令下,輸入
webpack

　　　　node -v 若是以下圖,則顯示成功web

　　　　　　3:安裝cli vue-cli

　　　　　　在安裝node.js完成後，在node.js中會同時幫咱們安裝一個npm包管理器npm。咱們能夠藉助npm命令來安裝node.js的包。這個工具至關於python的pip管理器。npm

　　　　　3>1:　npm install -g vue-clijson

　　　　　　若是下載成功,若是以下圖,則成功

　　　　　　二: 使用腳手架,建立第一個項目

　　　　　　1: 建立項目

　　　　　　vue init webpack 項目名

注意!!!!! ,建立時候先選擇,地址,

　　　　　　2:配置圖,

　　　　　　如產生了以下圖:

　　　　　　3: 安裝界面

　　　　　　 3>1 :安裝中

　　　　　　　　　　3>2:安裝完

　　　　　　　　　　3>3:運行查看效果

　　　　　　三:vue 目錄解析

├── README.md            項目介紹
├── index.html           入口頁面
├── build              構建腳本目錄
│  ├── build-server.js         運行本地構建服務器，能夠訪問構建後的頁面
│  ├── build.js            生產環境構建腳本
│  ├── dev-client.js          開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新
│  ├── dev-server.js          運行本地開發服務器
│  ├── utils.js            構建相關工具方法
│  ├── webpack.base.conf.js      wabpack基礎配置
│  ├── webpack.dev.conf.js       wabpack開發環境配置
│  └── webpack.prod.conf.js      wabpack生產環境配置
├── config             項目配置
│  ├── dev.env.js           開發環境變量
│  ├── index.js            項目配置文件
│  ├── prod.env.js           生產環境變量
│  └── test.env.js           測試環境變量
├── mock              mock數據目錄
│  └── hello.js
├── package.json          npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
├── src               源碼目錄  
│  ├── main.js             入口js文件
│  ├── app.vue             根組件
│  ├── components           公共組件目錄
│  │  └── title.vue
│  ├── assets             資源目錄，這裏的資源會被wabpack構建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              應用級數據（state）
│  │  └── index.js
│  └── views              頁面目錄
│    ├── hello.vue
│    └── notfound.vue
├── static             純靜態資源，不會被wabpack構建。
└── test              測試文件目錄（unit&e2e）
  └── unit              單元測試
    ├── index.js            入口腳本
    ├── karma.conf.js          karma配置文件
    └── specs              單測case目錄
      └── Hello.spec.js