vue-cli 腳手架分析

時間 2019-11-11

標籤 vue cli 腳手架分析简体版

原文原文鏈接

Vue-cli

1、安裝vue-clicss

安裝vue-cli的前提是你已經安裝了npm，安裝npm你能夠直接下載node的安裝包進行安裝。你能夠在命令行工具裏輸入npm -v 檢測你是否安裝了npm和版本狀況。出現版本號說明你已經安裝了npm和node，我這裏的npm版本爲3.10.10。若是該命令不可使用，須要安裝node軟件包，根據你的系統版本選擇下載安裝就能夠了。html

下載地址：http://nodejs.cn/download/vue

npm沒有問題，接下來咱們能夠用npm 命令安裝vue-cli了，在命令行輸入下面的命令：node

1	npm install vue-cli -g

-g :表明全局安裝。若是你安裝時報錯，通常是網絡問題，你能夠嘗試用cnpm來進行安裝。安裝完成後，能夠用vue -V來進行查看 vue-cli的版本號。注意這裏的V是大寫的。我這裏版本號是2.8.1.webpack

若是vue -V的命令管用了，說明已經順利的把vue-cli安裝到咱們的計算機裏了。git

2、初始化項目github

咱們用vue init命令來初始化項目，具體看一下這條命令的使用方法。web

1	$ vue init <template-name> <project-name>

init：表示我要用vue-cli來初始化項目vue-router

<template-name>：表示模板名稱，vue-cli官方爲咱們提供了5種模板，vuex

webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。

webpack-simple-一個簡單webpack+vue-loader的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。

browserify-simple-一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

simple-一個最簡單的單頁應用模板。

<project-name>：標識項目名稱，這個你能夠根據本身的項目來起名字。

在實際開發中，通常咱們都會使用webpack這個模板，那咱們這裏也安裝這個模板，在命令行輸入如下命令：

1	vue init webpack vuecliTest

輸入命令後，會詢問咱們幾個簡單的選項，咱們根據本身的須要進行填寫就能夠了。

Project name :項目名稱，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest
Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。
Author：做者，若是你有配置git的做者，他會讀取。
Install vue-router? 是否安裝vue的路由插件，咱們這裏須要安裝，因此選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。咱們這裏不須要輸入n，若是你是大型團隊開發，最好是進行配置。
setup unit tests with Karma + Mocha? 是否須要安裝單元測試工具Karma+Mocha，咱們這裏不須要，因此輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試，咱們這裏不須要，因此輸入n。

命令行出現上面的文字，說明咱們已經初始化好了第一步。命令行提示咱們如今能夠做的三件事情。

一、cd vuecliTest 進入咱們的vue項目目錄。

二、npm install 安裝咱們的項目依賴包，也就是安裝package.json裏的包，若是你網速很差，你也可使用cnpm來安裝。

三、npm run dev 開發模式下運行咱們的程序。給咱們自動構建了開發用的服務器環境和在瀏覽器中打開，並實時監視咱們的代碼更改，即時呈現給咱們。

出現這個頁面，說明咱們的初始化已經成功，如今能夠快樂的玩耍了。

Vue-cli項目結構講解

vue-cli腳手架工具就是爲咱們搭建了開發所須要的環境，爲咱們省去了不少精力。有必要對這個環境進行熟悉，咱們就從項目的結構講起。

Ps：因爲版本實時更新和你選擇安裝的不一樣（這裏列出的是模板爲webpack的目錄結構），因此你看到的有可能和下邊的有所差異。

|-- build // 項目構建(webpack)相關代碼

| |-- build.js // 生產環境構建代碼

| |-- check-version.js // 檢查node、npm等版本

| |-- dev-client.js // 熱重載相關

| |-- dev-server.js // 構建本地服務器

| |-- utils.js // 構建工具相關

| |-- webpack.base.conf.js // webpack基礎配置

| |-- webpack.dev.conf.js // webpack開發環境配置

| |-- webpack.prod.conf.js // webpack生產環境配置

|-- config // 項目開發環境配置

| |-- dev.env.js // 開發環境變量

| |-- index.js // 項目一些配置變量

| |-- prod.env.js // 生產環境變量

| |-- test.env.js // 測試環境變量

|-- src // 源碼目錄

| |-- components // vue公共組件

| |-- store // vuex的狀態管理

| |-- App.vue // 頁面入口文件

| |-- main.js // 程序入口文件，加載各類公共組件

|-- static // 靜態文件，好比一些圖片，json數據等

| |-- data // 羣聊分析獲得的數據用於數據可視化

|-- .babelrc // ES6語法編譯配置

|-- .editorconfig // 定義代碼格式

|-- .gitignore // git上傳須要忽略的文件格式

|-- README.md // 項目說明

|-- favicon.ico

|-- index.html // 入口頁面

|-- package.json // 項目基本信息

重要文件講解：

package.json

package.json文件是項目根目錄下的一個文件，定義該項目開發所須要的各類模塊以及一些項目配置信息（如項目名稱、版本、描述、做者等）。

package.json 裏的scripts字段，這個字段定義了你能夠用npm運行的命令。在開發環境下，在命令行工具中運行npm run dev 就至關於執行 node build/dev-server.js .也就是開啓了一個node寫的開發行建議服務器。由此能夠看出script字段是用來指定npm相關命令的縮寫。

"scripts": {

"dev": "node build/dev-server.js",

"build": "node build/build.js"

dependencies字段和devDependencies字段

dependencies字段指項目運行時所依賴的模塊；
devDependencies字段指定了項目開發時所依賴的模塊；

在命令行中運行npm install命令，會自動安裝dependencies和devDempendencies字段中的模塊。package.json還有不少相關配置，若是你想全面瞭解，能夠專門去百度學習一下。

webpack配置相關

咱們在上面說了運行npm run dev 就至關於執行了node build/dev-server.js,說明這個文件至關重要，先來熟悉一下它。我貼出代碼並給出重要的解釋。

dev-server.js

100

101

102

103

104

105

106

107

108

109

// 檢查 Node 和 npm 版本

require('./check-versions')()

// 獲取 config/index.js 的默認配置

var config = require('../config')

// 若是 Node 的環境沒法判斷當前是 dev / product 環境

// 使用 config.dev.env.NODE_ENV 做爲當前的環境

if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)

// 使用 NodeJS 自帶的文件路徑工具

var path = require('path')

// 使用 express

var express = require('express')

// 使用 webpack

var webpack = require('webpack')

// 一個能夠強制打開瀏覽器並跳轉到指定 url 的插件

var opn = require('opn')

// 使用 proxyTable

var proxyMiddleware = require('http-proxy-middleware')

// 使用 dev 環境的 webpack 配置

var webpackConfig = require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic

// 若是沒有指定運行端口，使用 config.dev.port 做爲運行端口

var port = process.env.PORT || config.dev.port

// Define HTTP proxies to your custom API backend

// https://github.com/chimurai/http-proxy-middleware

// 使用 config.dev.proxyTable 的配置做爲 proxyTable 的代理配置

var proxyTable = config.dev.proxyTable

// 使用 express 啓動一個服務

var app = express()

// 啓動 webpack 進行編譯

var compiler = webpack(webpackConfig)

// 啓動 webpack-dev-middleware，將編譯後的文件暫存到內存中

var devMiddleware = require('webpack-dev-middleware')(compiler, {

publicPath: webpackConfig.output.publicPath,

stats: {

colors: true,

chunks: false

}

})

// 啓動 webpack-hot-middleware，也就是咱們常說的 Hot-reload

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// force page reload when html-webpack-plugin template changes

compiler.plugin('compilation', function (compilation) {

compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {

hotMiddleware.publish({ action: 'reload' })

cb()

})

// proxy api requests

// 將 proxyTable 中的請求配置掛在到啓動的 express 服務上

Object.keys(proxyTable).forEach(function (context) {

var options = proxyTable[context]

if (typeof options === 'string') {

options = { target: options }

}

app.use(proxyMiddleware(context, options))

})

// handle fallback for HTML5 history API

// 使用 connect-history-api-fallback 匹配資源，若是不匹配就能夠重定向到指定地址

app.use(require('connect-history-api-fallback')())

// serve webpack bundle output

// 將暫存到內存中的 webpack 編譯後的文件掛在到 express 服務上

app.use(devMiddleware)

// enable hot-reload and state-preserving

// compilation error display

// 將 Hot-reload 掛在到 express 服務上

app.use(hotMiddleware)

// serve pure static assets

// 拼接 static 文件夾的靜態資源路徑

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

// 爲靜態資源提供響應服務

app.use(staticPath, express.static('./static'))

// 讓咱們這個 express 服務監聽 port 的請求，而且將此服務做爲 dev-server.js 的接口暴露

module.exports = app.listen(port, function (err) {

if (err) {

console.log(err)

return

}

var uri = 'http://localhost:' + port

console.log('Listening at ' + uri + '\n')

// when env is testing, don't need open it

// 若是不是測試環境，自動打開瀏覽器並跳到咱們的開發地址

if (process.env.NODE_ENV !== 'testing') {

opn(uri)

}

})

webpack.base.confg.js webpack的基礎配置文件

...

module.export = {

// 編譯入口文件

entry: {},

// 編譯輸出路徑

output: {},

// 一些解決方案配置

resolve: {},

resolveLoader: {},

module: {

// 各類不一樣類型文件加載器配置

loaders: {

...

// js文件用babel轉碼

{

test: /\.js$/,

loader: 'babel',

include: projectRoot,

// 哪些文件不須要轉碼

...

}

// vue文件一些相關配置

vue: {}

}

這裏有不少webpack的知識，我也有一個專門講webpack的視頻教程，你能夠去看一看《跟技術胖學webpack視頻教程》。

.babelrc

Babel解釋器的配置文件，存放在根目錄下。Babel是一個轉碼器，項目裏須要用它將ES6代碼轉爲ES5代碼。若是你想了解更多，能夠查看babel的知識。

{

//設定轉碼規則

"presets": [

["env", { "modules": false }],

"stage-2"

//轉碼用的插件

"plugins": ["transform-runtime"],

"comments": false,

//對BABEL_ENV或者NODE_ENV指定的不一樣的環境變量，進行不一樣的編譯操做

"env": {

"test": {

"presets": ["env", "stage-2"],

"plugins": [ "istanbul" ]

}

.editorconfig

該文件定義項目的編碼規範，編譯器的行爲會與.editorconfig文件中定義的一致，而且其優先級比編譯器自身的設置要高，這在多人合做開發項目時十分有用並且必要。

root = true

[*] // 對全部文件應用下面的規則

charset = utf-8 // 編碼規則用utf-8

indent_style = space // 縮進用空格

indent_size = 2 // 縮進數量爲2個空格

end_of_line = lf // 換行符格式

insert_final_newline = true // 是否在文件的最後插入一個空行

trim_trailing_whitespace = true // 是否刪除行尾的空格

Vue-cli的模板

1、npm run build 命令

有小夥伴問我，如何把寫好的Vue網頁放到服務器上，那我就在這裏講解一下，主要的命令就是要用到npm run build 命令。咱們在命令行中輸入npm run build命令後，vue-cli會自動進行項目發佈打包。你在package.json文件的scripts字段中能夠看出，你執行的npm run build命令就相對執行的 node build/build.js 。

package.json的scripts 字段：

"scripts": {

"dev": "node build/dev-server.js",

"build": "node build/build.js"

在執行完npm run build命令後，在你的項目根目錄生成了dist文件夾，這個文件夾裏邊就是咱們要傳到服務器上的文件。

dist文件夾下目錄包括：

index.html 主頁文件:由於咱們開發的是單頁web應用，因此說通常只有一個html文件。
static 靜態資源文件夾：裏邊js、CSS和一些圖片。

2、main.js文件解讀

main.js是整個項目的入口文件,在src文件夾下：

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false //生產環境提示，這裏設置成了false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App }

})

經過代碼能夠看出這裏引進了App的組件和<App/>的模板，它是經過 import App from ‘./App’這句代碼引入的。咱們找到App.vue文件，打開查看。

3、App.vue文件:

<router-view></router-view>

</div>

</template>

export default {

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

app.vue文件咱們能夠分紅三部分解讀，

<template></template>標籤包裹的內容：這是模板的HTMLDom結構，裏邊引入了一張圖片和<router-view></router-view>標籤，<router-view>標籤說明使用了路由機制。咱們會在之後專門拿出一篇文章講Vue-router。
<script></script>標籤包括的js內容：你能夠在這裏些一些頁面的動態效果和Vue的邏輯代碼。
<style></style>標籤包裹的css內容：這裏就是你平時寫的CSS樣式，對頁面樣子進行裝飾用的，須要特別說明的是你能夠用<style scoped></style>來聲明這些css樣式只在本模板中起做用。