腳手架安裝與卸載
安裝
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 // 靜態資源目錄（一般存放圖片類）
