vueweb

vue project

檢查專案環境

一、檢查是否安裝node.js

# 檢查node版本
$ node -v
# 如未安裝
$ brew install node 
# 或者 
$ npm install node

二、安裝vue.js環境

# 全域性安裝 vue-cli
$ npm install --global vue-cli

三、建立vue專案

# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴
$ cd my-project
$ npm install
# 安裝路由
 

$ npm install vue-router

四、引入 Mint-ui

# Vue 2.0
$ npm install mint-ui -S
# 引入全部元件
import Mint from 'mint-ui'
Vue.use(Mint)

五、執行、編譯、打包

# 執行專案 localhost:9000
$ npm run dev

# 編譯專案,打包
$ npm run build

# 構建產品並檢視包分析器報告
$ npm run build --report

# 執行單元測試
$ npm run unit

# run e2e tests
$ npm run e2e

# run all tests
 

$ npm test

六、目錄結構

├── VueWeb
│   ├── build                         #構建指令碼目錄
│   ├── config                        #構建配置目錄
│   ├── node_modules                  #依賴的node工具包目錄
│   ├── src                           #原始碼目錄
│   │   │   ├── assets                #資源目錄
│   │   │   │   └──logo.png
│   │   │   ├── components            #元件目錄
 

│   │   │   │   └── HelloWorld.vue
│   │   │   ├── router                #路由配置
│   │   │   │   └── index.js
│   │   │   ├── App.vue               #頁面級Vue元件
│   │   │   ├── main.js               #頁面入口JS檔案
│   ├── static                        #靜態資源目錄
│   ├── test                          #測試檔案目錄
│   ├── index.html                    #入口頁面
│   └──package.json                   #專案描述檔案