Vue命令行工具vue-cli

前面的話

　　Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目 。本文將詳細介紹Vue命令行工具vue-cli

 

概述

　　Vue-cli是Vue官方提供的用於初始化Vue項目的腳手架工具。使用Vue-cli有如下幾大優點

　　一、Vue-cli是一套成熟的vue項目架構設計，會跟着Vue版本的更迭而更新

　　二、Vue-cli提供了一套本地的熱加載的測試服務器

　　三、Vue-cli集成了一套打包上線的方案，可以使用webpack或Browserify等構建工具

 

安裝

　　下面來安裝vue-cli

# 全局安裝 vue-cli
$ npm install -g vue-cli

　　[注意]必定要在全局模式下安裝vue-cli，不然沒法使用vue命令

　　全局模式下，安裝vue-cli後，才能夠正常使用

　　輸入vue命令，會出現以下視圖

　　輸入vue -V命令，能夠看出當前vue-cli使用的是2.8.2版本。輸入vue list 能夠獲得推薦的官方模板

 

建立項目

　　接下來，建立一個基於 webpack 模板的新項目

$ vue init webpack my-project

　　注意： 使用下箭頭鍵進行切換時，向右的尖括號並不會隨着按鍵的按下而變化，可是按下回車鍵時，選項確實更改了

　　建立項目後，在當前目錄下，會新建my-project文件夾，裏面是my-project項目所包含的文件

　　my-project中的package.json文件中，所依賴的包以下所示

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "match <121631835@qq.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.4.2",
    "vue-router": "^2.7.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

　　接下來， 進入my-project文件夾，並安裝依賴包

$ cd my-project
$ npm install

 

運行項目

　　接下來，輸入下列代碼來運行項目

$ npm run dev

　　以上代碼的意思是運行package.json中，scripts腳本中dev指代的程序。類比於，運行node build/dev-server.js

  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  }

　　localhost:8080的網頁自動打開，效果以下

 

　　打開app.vue文件，在模板中加入<p>小火柴的藍色理想</p> 這一行代碼，並保存

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <p>小火柴的藍色理想</p>
  </div>
</template>

　　當前瀏覽器將會自動更新到頁面的最新狀態，這是vue-cli自帶的熱更新的功能

 

項目部署

　　接下來，使用npm run build來部署上線的項目

npm run build

　　生成的dist目錄，就是打包構建後的項目目錄