Vue 框架-10-搭建腳手架 CLI + 批處理快捷啟動

• 腳手架是通過 webpack 搭建的開發環境
• 使用 ES6 語法
• 打包和壓縮 JS 為一個檔案
• 專案檔案在環境中，而不是瀏覽器
• 實現頁面自動重新整理

環境準備

• 1.安裝 node.js

  • 官網：https://nodejs.org/zh-cn/
    

• 2.開啟終端或者 cmd 使用下面兩個命令進行測試：
  

要求：node 版本 >6.9.0

node -v

要求：npm 版本 >=3.10.0

npm -v
 

安裝 Vue CLI

Vue CLI 官方文件：https://cli.vuejs.org/guide/

1.全域性安裝 vue-cli，使用：

npm install --global vue-cli

然後它提示有一個搬家了，也可以根據提示安裝了，我也不知什麼用處，多一條命令而已：

npm install --global coffeescript

測試有沒有安裝成功：

vue --version

2.建立一個基於 webpack 模板的新專案

【注意】：先在終端 cmd 進入想要存放專案的路徑

下面輸入命令，建立示例專案 first_pro （專案名不能有大寫）

vue init webpack first_pro

然後會提示專案的額一些配置資訊，想要使用（）中的預設的資訊，就按回車就可以

【注意】不要著急回車，不然會預設裝一大堆東西，暫時不需要（我第一次裝的時候就全回車，然後共有 2500 個檔案，小聲。。）

目前的話，按我的選擇選就可以：

3.然後特會提示我們執行：

  cd first_pro
  npm run dev  //開啟開發環境，怎麼關閉呢？把 cmd 視窗關閉，它就關閉了

如果你沒有執行 npm 還會提示 npm install

4.然後完成，它就會提示我們可以訪問：

http://localhost:8080
 

Vue CLI 預設目錄簡介

批處理快捷啟動搭建腳手架 CLI

有人有疑惑了，那我豈不是沒開啟一次環境，開啟 cmd 再 cd 進入專案路徑，再使用 npm run dev 太麻煩了

【巧了】：樓主瞭解一點批處理，教你怎麼快捷啟動

1.在桌面新建記事本，命名為 npm run dev.txt，寫入下面內容：
【注意】：路徑改成自己的，看到 index.html 的那一級目錄

@echo off
@mode con lines=18 cols=55

D:

cd D:\space\webpackpro\first_pro

npm run dev

2.點【檔案】>【另存為】>【所有檔案】>該字尾名為【.bat】>【修改編碼 utf8】>【儲存】

3.雙擊就可以開啟啦！

更多文章：

• Vue 小例項：https://blog.csdn.net/qq_40147863/article/category/8317526