vue-cli3 初始化創建項目

VUE CLI 3

一、vue-cli3 與 vue-cli2的區別

• vue cli3 是基於webpack4 打造的， vue-cli 2 還是 webpack3
• vue-cli 3 的設計原則是0配置，移除的配置文件根目錄下的 build 和config等目錄
• Vue-cli3 提供了vue ui 命令，可以提供可視化配置，更加人性化
• 移除了static文件夾，新增public文件夾，並且index.html 移動到了public中

二、初始化vue cli實例（創建項目）

• 腳手架2

vue init webpack

• 腳手架3

# 執行
vue create 項目名稱
# 然后會生成下列一系列的配置信息
# 第一步
Vue CLI v3.2.1
┌───────────────────────────┐
│  Update available: 4.4.1  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)  # 選擇配置
❯ default (babel, eslint)  # 默認配置
  Manually select features # 手動選擇特性, 這里 我們選擇手動的選擇特性
# 選擇 Manually select features 后選擇配置
❯◉ Babel   # es6轉es5
 ◯ TypeScript  # 
 ◯ Progressive Web App (PWA) Support  # 漸進式web app 支持
 ◯ Router  # 路由
 ◯ Vuex  # VueX是適用於在Vue項目開發時使用的狀態管理工具
 ◯ CSS Pre-processors  # css預處理器
 ◉ Linter / Formatter  # 就是ESlint  對代碼做一些檢測的，規范性的檢測
 ◯ Unit Testing  # 單元測試
 ◯ E2E Testing  # 端到端測試
 
 # 第二步
  Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)  # 你需要把你要配置的房放在哪里
❯ In dedicated config files  # 單獨的配置文件
  In package.json  # 放在 package.json 中
  
  # 第三步
  Save this as a preset for future projects? (y/N)  # 是否需要將剛才的選擇保存到 自定義的選擇中 。這里可以報錯

三、Vue-cli3 創建的項目的目錄結構

vue_project
	-- node_modules  # 安裝的庫依賴
	-- public  # 相當於vue-cli2中的static，打包后原封不動的放在dist中
	-- src  # 源代碼
	-- .browserslistrc  # 配置瀏覽器相關的東西
	-- .gitignore  # 配置git相關的東西，可以配置忽略一些文件
	-- .babel.config.js  # 配置 babel
	-- package.json
	-- package-lock.json  # 顯示的真實的安裝版本(package.json中可能有~或者 ^ 后面加版本號，因此可能會安裝不同版本的依賴)
	-- readme.md  # markdown 文檔

四、啟動項目以及打包項目

# 啟動項目
npm run serve
# 打包項目
npm run build

注：這些命令都是在 package.json 的 script 中配置的

{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 運行項目
    "serve": "vue-cli-service serve",
    # 打包項目
    "build": "vue-cli-service build"
  },
  # 運行依賴
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 開發依賴
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}