腳手架安裝與解除安裝

安裝

npm install -g vue-cli
 //or
npm install -g @vue/cli

解除安裝

npm uninstall -g vue-cli
//or
npm uninstall -g @vue/cli

橋接工具

npm install -g @vue/cli-init

vue專案建立

vue 2.0 專案建立

vue init webpack projectname

vue 3.0 專案建立

vue create projectname

執行專案

cd projectname   //到指定檔案目錄
npm run serve     //3.0專案執行
npm run dev       //2.0專案執行
 

檢視vue cli版本

vue -V

vue專案目錄

vue3.0專案目錄

.
├── 'node_modules'     // npm下載包都在這個資料夾
├── 'public'                
│   ├── 'favicon.ico'
│   └── 'index.html'  // 作為入口模板,最後打包檔案所在地，也是main,js 繫結的 dom
├── 'src'             // 整個工程檔案目錄
│   ├── 'api'         // 建立用來管理介面的資料夾
│   │   └── 'index.js'    // axios 入口使用
│   ├── 'assets'      // 靜態資源管理負責管理圖片文字一類的
│   │   ├── 'font'    // 存放字型庫資料夾
│   │   └── 'img'     // 存放圖片的資料夾
│   ├── 'components'  // 存放元件資料夾
│   │   └── 'HelloWorld.vue'     // 這是一個名叫HelloWorld.vue元件
│   ├── 'config'      // 專案配置的資料夾
│   │   └──  'index.js'          // 利用node 找包特性 起名index.js 可以快速導包
│   ├── 'directive'   // 自定義指令資料夾
│   │   └── 'index.js'           // 利用node 找包特性 起名index.js 可以快速導包
│   ├── 'lib'         //工具包
│   │   ├── 'tools.js'           // 存放和業務無關工具性質的js程式碼
│   │   └── 'util.js'            //存放和業務相關工具性質的js程式碼
│   │   └── 'axios.js'            //ajax 非同步封裝
│   ├── 'mock'        // 模擬返回資料資料夾
│   │   └── 'index.js'           // 利用node 找包特性 起名index.js 可以快速導包
│   ├── 'router'      // 路由相關
│   │   ├── 'index.js'            // 利用node 找包特性 起名index.js 可以快速導包
│   │   └── 'router.js'           // 路由配置
│   ├── 'store'        // Vuex狀態管理資料夾
│   │   ├── 'plugin'   // Vuex配置資料夾
│   │   │   └── 'saveInLocal.js'         // vuex 檔案內容本地化儲存
│   │   ├── 'module'   // 提取的特定模組的資料夾
│   │   │   └── 'user.js'         // 儲存user模組的vuex js
│   │   ├── 'actions.js'          // 提取出vuex actions模組
│   │   ├── 'index.js'            // 利用node 找包特性 起名index.js 可以快速導包
│   │   ├── 'mutations.js'        // 提取出vuex mutations模組
│   │   ├── 'getters.js'          // 提取出vuex getters模組
│   │   └── 'state.js'            // 提取出vuex state模組
│   ├── 'views'        // 檢視元件 和 公共元件
│   │   ├── 'About.vue'
│   │   └── 'Home.vue'
│   ├── App.vue     // 由於render 特性 所以需要一個被渲染的vue檔案
│   ├── main.js     // 專案入口，檔案打包會找這個檔案，並且將這個檔案的內容打包
├── .browserslistrc      //目標瀏覽器配置表
├── .editorconfig        // 編輯器配置
├── .gitignore           // 忽略用git提交省略的提交目錄
├── babel.config.js      //  高階語法轉低階語法
├── package.json
├── package-lock.json    // 鎖版本包
├── postcss.config.js    //CSS前處理器
├── README.md
└── vue.config.js        // 專案自定義配置
 

vue2.0專案目錄

├── 'README.md' // 專案說明文件
├── 'node_modules' // 依賴包目錄
├── 'build' // webpack相關配置檔案（都已配置好，一般無需再配置）
│       ├── 'build.js'  //生成環境構建
│       ├── 'check-versions.js'  //版本檢查（node，npm）
│       ├── 'dev-client.js'    //開發伺服器熱過載 （實現頁面的自動重新整理） 
│       ├── 'dev-server.js'    //構建本地伺服器（npm run dev）
│       ├── 'utils.js'       // 構建相關工具
│       ├── 'vue-loader.conf.js'   //csss 載入器配置
│       ├── 'webpack.base.conf.js'    //webpack基礎配置
│       ├── 'webpack.dev.conf.js'     // webpack開發環境配置
│       └── 'webpack.prod.conf.js'     //webpack生產環境配置
├── 'config' // vue基本配置檔案（可配置監聽埠，打包輸出等）
│       ├── 'dev.env.js' // 專案開發環境配置
│       ├── 'index.js' //   專案主要配置（包括監聽埠、打包路徑等）
│       └── 'prod.env.js' // 生產環境配置
├── 'index.html' // 專案入口檔案
├── 'package-lock.json' // npm5 新增檔案，優化效能
├── 'package.json' // 專案依賴包配置檔案
├── 'src' // 專案核心檔案（存放我們編寫的原始碼檔案）
│       ├── 'App.vue' // 根元件      
│       ├── 'assets' // 靜態資源（樣式類檔案、如css，less，和一些外部的js檔案）
│       │       └── 'css'  //樣式
│       │       └── 'font'  //字型
│       │       └── 'images'  //圖片
│       ├── 'components' // 元件目錄
│       │       └── 'Hello.vue' // 測試元件
│       ├── 'main.js' // 入口js檔案
│       └── 'router' // 路由配置資料夾
│       └── 'index.js' // 路由配置檔案
└── static // 靜態資源目錄（一般存放圖片類）