vue學習-vue-cli4創建項目與目錄結構簡介

vue學習-vue-cli4創建項目與目錄結構簡介

---

目錄

---

---

內容

---

1、vue cli 4創建項目

1.1、版本簡介

	版本	簡介
@vue/cli	4.4.6	vue腳手架，搭建vue項目
vue	2.6.11	vue框架核心

1.2、創建項目

1. 命令行或者git bash切換至需要創建項目的目錄，以本人使用目錄爲例：E:\phpstudy_pro\WWW\dev\webplace\project

2. 執行創建項目命令：

    vue create 項目名稱
   

3. 手動配置選項：
   

4. 選擇項目所需依賴（組件)
   

   • 依賴簡介

       這裏的話按住空格就是選擇，全選的話就是按住a
       ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
       \>( ) Babel //轉碼器，可以將ES6代碼轉爲ES5代碼，從而在現有環境執行。
       ( ) TypeScript// TypeScript是一個JavaScript（後綴.js）的超集（後綴.ts）包含並擴展了 JavaScript 的語法，需要被編譯輸出爲 JavaScript在瀏覽器運行
       ( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
       ( ) Router // vue-router（vue路由）
       ( ) Vuex // vuex（vue的狀態管理模式）
       ( ) CSS Pre-processors // CSS 預處理器（如：less、sass）
       ( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
       ( ) Unit Testing // 單元測試（unit tests）
       ( ) E2E Testing // e2e（end to end） 測試
     

   • 說明

     • 可以根據 需要選擇初始依賴，也可後面添加

5. 選擇是否使用history router模式
   

  Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過調用瀏覽器提供的接口）。 我這裏建議選n。這樣打包出來丟到服務器上可以直接使用了，後期要用的話，也可以自己再開起來。 選yes的話需要服務器那邊再進行設置。 Use history mode for router? (Requires proper server setup for index fallback in production)

6. 選擇css 預處理器
   

  新創建的.vue文件，默認sass ,我們一般選擇如圖選項，可以後面自己更改。

7. 選擇如何存放配置
   

  選項一：配置文件單獨存放；選項二：統一存放在package.json文件中。這裏我們一般選擇單獨生成配置文件。

8. 選擇是否保存當前的配置
   

  是否把當前創建選項保存爲一個預置文件（模板文件），用於將來創建新項目。一般選擇否，會根據項目不同，選擇不同選項。

9. 等待項目初始化完成
   

10. 創建成功，訪問
    

    • 訪問方式一：如圖所示
    • 訪問方式二：圖像界面方式

      • 命令

          vue ui
        

      • 圖示：

2、項目結構簡介

• 圖示2-1：
• node_modules:第三方依賴
• public:公共資源
• src:源碼
  • assets：靜態資源，css、img、js、font等
  • compoments：組件，一般自定義組件
  • router：路由配置
  • views：視圖組件
• App.vue：首頁組件（默認組件）
• main.js：入口文件
• .browserslistrc：配置使用CSS兼容性插件的使用範圍
• .eslintrc.js：配置ESLint
• .gitignore：配置git忽略的文件或者文件夾
• babel.config.js：使用一些預設
• package.json：項目描述既依賴
• package-lock.json：版本管理使用的文件
• README.md：項目描述

後記 ：

  本項目爲參考某馬視頻開發，相關視頻及配套資料可自行度娘或者聯繫本人。上面爲自己編寫的開發文檔，持續更新。歡迎交流，本人QQ:806797785

前端項目源代碼地址：https://gitee.com/gaogzhen/vue-leyou
後端JAVA源代碼地址:https://gitee.com/gaogzhen/JAVA