Vue 框架-10-搭建腳手架 CLI

肖朋偉發表於2018-11-15

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,寫入下面內容:
【注意】:路徑改成自己的

@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

相關文章