vue2.0與vue3.0專案建立
阿新 • • 發佈:2020-12-28
腳手架安裝與解除安裝
安裝
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 // 靜態資源目錄(一般存放圖片類)