Vue.js——60分鐘browserify項目模板快速入門

時間  2019-11-08
標籤 vue.js vue 60分 browserify 項目 模板 快速 入門 欄目 JavaScript 简体版
原文   原文鏈接

概述

在以前的一系列vue.js文章，咱們都是用傳統模式引用vue.js以及其餘的js文件的，這在開發時會產生一些問題。javascript

首先，這限定了咱們的開發模式是基於頁面的，而不是基於組件的，組件的全部代碼都直接寫在頁面中，這對於一些複雜的頁面來講，不是好事情，代碼的可讀性會較差，也不便於管理。css

其次，定義在HTML頁面中的組件，沒法被其餘頁面重用，咱們只能經過複製粘貼的方式將組件代碼拷貝到其餘頁面，這也違反了DRY原則。既然組件是Vue.js的重要概念，咱們就應該利用好它。html

爲了解決這些問題，Vue.js官方提供了一些開發模板，這使得咱們可以快速地配置好vue.js的開發環境。基於這些開發模板，將使用.vue文件定義組件，使組件代碼從HTML頁面代碼中分離出來。在定義組件時，使用一些ES2015的便捷語法，將會使組件開發變得更加輕鬆。vue

Vue.js官方提供了兩種類型的模板項目：java

  • 基於vue cli和browserify的項目模板
  • 基於vue cli和webpack的項目模板

vue cli是Vue.js官方提供的命令行建立Vue.js項目腳手架的工具。這兩種類型的項目模板分別提供了簡單模式和徹底模式，簡單模式僅包含基於vue.js開發必要的一些資源和包，使用該模式能夠快速地投入到開發。徹底模式則還包括ESLink、單元測試等功能。node

今天咱們首先介紹基於vue cli和browserify的項目模板。webpack

本文的Demo和源代碼已放到GitHub，若是您以爲內容不錯，請點個贊，或在GitHub上加個星星！git

vue-browserify-simple示例 GitHub Source

browserify介紹

image

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.github

Browserify是一個CommonJS風格的模塊及依賴管理工具，它不只是一個打包工具，更關鍵的是其JavaScript的模塊及依賴管理能力。web

Browserify參照了Node中的模塊系統，約定用require()來引入其餘模塊，用module.exports來引出模塊。在我看來，Browserify不一樣於RequireJS和Sea.js的地方在於，它沒有着力去提供一個「運行時」的模塊加載器，而是強調進行預編譯。預編譯會帶來一個額外的過程，但對應的，你也再也不須要遵循必定規則去加一層包裹。所以，相比較而言，Browserify提供的組織方式更簡潔，也更符合CommonJS規範。

Browserify主頁：http://browserify.org/

vueify介紹

所謂vueify，就是使用.vue格式的文件定義組件，一個.vue文件就是一個組件。

在.vue文件定義的組件內容包括3部分：

  • <style></style>標籤：定義組件樣式
  • <template></template>標籤：定義組件模板
  • <script></script>標籤：定義組件的各類選項，好比data, methods等。

vue.js已經擁抱ES6了，使用.vue文件定義組件時，須要使用ES6的一些語法，ES6提供了一些較爲優秀的特性，這使得定義組件的代碼變得更加簡潔。

如下app.vue文件定義了一個組件：

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

你也能夠在組件文件中使用預處理語言：

// app.vue
<style lang="stylus">
.red
  color #f00
</style>

<template lang="jade">
h1(class="red") {{msg}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    msg: 'Hello world!'
</script>

若是你不太熟悉預處理語言的語法，你可使用第一種方式來定義組件。

vueify主頁：https://github.com/vuejs/vueify

安裝vue cli

vue cli是什麼呢？官方的介紹以下：

A simple CLI for scaffolding Vue.js projects.

像Visual Studio這樣的工具，在建立項目時能夠直接選擇Visual Studio內置的一些項目模板，例如：建立一個ASP.NET MVC或ASP.NET Web API項目。
Vue.js提供了的一系列項目模板，但它沒有Visual Studio這種可視化的工具。經過什麼方式來使用項目模板呢？這就是vue cli要乾的事兒。

安裝要求：安裝vue cli須要Node.js和Git，Node.js須要4.x版本以上。

我使用的是node 6.3.0版本：

image

執行如下命令安裝vue cli

npm install -g vue-cli

安裝完vue cli後，咱們就能夠在git bash窗口中使用命令建立Vue.js的項目了。

使用vue-browserify-simple模板

1.生成項目

右鍵運行Git Bash Here

image

在git bash下輸入如下命令：

vue init browserify-simple my-browserify-simple-demo

browserify-simple是項目模板的名稱，my-browserify-simple-demo是你要生成的項目名稱。

image

執行這個命令時，會有一些提示，一路按回車鍵。提示private (Y/n)時，根據須要輸入Y或n，這裏我輸入了Y做爲私有項目。

image

目錄下生成了一個文件夾my-browserify-simple-demo。

image

2. 項目結構說明

打開my-browserify-simple-demo文件夾，看到如下目錄結構：

image

打開index.html文件，注意它所引用的build.js文件並不存在，後面我會告訴你dist/build.js文件是如何生成的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>my-browserify-simple-demo</title>
  </head>
  <body>
    <app></app>
    <script src="dist/build.js"></script>
  </body>
</html>

文件樹結構以下：

├─.babelrc	// babel配置文件
├─.gitignore	
├─index.html	// 主頁
├─package.json	// 項目配置文件
├─README.md  
├─dist		// 發佈目錄
│   ├─.gitkeep       
├─src		// 開發目錄	
│   ├─App.vue	// App.vue組件
│   ├─main.js	// 預編譯入口

這裏要特別說明兩個文件：package.json和.babelrc文件。

package.json

有不少初學者看到package.json文件就會頭痛，這個文件究竟是啥玩意兒，一堆看不懂的東西。

{
  "name": "my-browserify-simple-demo",
  "description": "A Vue.js project",
  "author": "keepfool <crmug@outlook.com>",
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
    "serve": "http-server -c 1 -a localhost",
    "dev": "npm-run-all --parallel watchify serve",
    "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
  },
  "dependencies": {
    "vue": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "cross-env": "^1.0.6",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-hmr": "^0.3.1",
    "http-server": "^0.9.0",
    "npm-run-all": "^1.6.0",
    "uglify-js": "^2.5.0",
    "vueify": "^8.5.2",
    "watchify": "^3.4.0"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  }
}

package.json文件是項目配置文件，除了項目的一些基本信息外，有3個重要的節點我說明一下：

  • dependencies：項目發佈時的依賴
  • devDependencies：項目開發時的依賴
  • scripts：編譯項目的一些命令

.babelrc文件

.babelrc文件定義了ES6的轉碼規則，基於ES6編寫的js代碼在編譯時都會被babel轉碼器轉換爲ES5代碼。

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"]
}

爲何要將ES6轉換爲ES5呢？由於咱們將使用ES6的一些語法來編寫.vue組件，而有些瀏覽器目前尚未全面支持ES6。

babel是一個很是有名的ES6轉碼器，babel主頁：https://babeljs.io/

3. 安裝依賴

執行如下命令安裝項目依賴：

cd my-browserify-simple-demo
npm install

安裝完成後，目錄下會產生一個node_modules文件夾。

image

項目相關的依賴都存放在這個文件夾下了。

image

4. 運行示例

執行如下命令運行示例：

npm run dev

image

在執行該命令後，dist目錄下會生成一個build.js文件。

image

打開127.0.0.1:8080，能夠看到如下畫面：

image

注意：以前我使用的node是4.4.5的版本，執行這個命令會出現一個錯誤：cann't find module vue-hot-reload api..，我將node.js升級到6.3.0版本後，刪除node_modules文件夾，而後再次執行npm install命令從新安裝依賴之後，該問題就解決了。

5. 編譯過程說明

build.js文件是怎麼產生的呢？咱們把它分爲兩種狀況：

  • 開發時生成build.js
  • 發佈時生成build.js

何爲開發時和發佈時？開發過.NET童鞋，能夠簡單的理解爲debug模式和release模式。

開發時成成build.js

在package.json文件的scripts節點下，有3行配置：

"scripts": {
  "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
  "serve": "http-server -c 1 -a localhost",
  "dev": "npm-run-all --parallel watchify serve"
}

npm run dev命令執行的是dev節點對應的命令npm-run-all --parallel watchify serve ，這行命令是依賴於watchify的，也就是下面這行命令：

watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js

你不用糾結這行命令的每一個參數是什麼意思，只須要理解src/main.js –o dist/build.js的含義：

編譯src/main.js文件，而後輸出到dist/build.js

serve節點的命令http-server -c 1 -a localhost用於開啓http-server，http-server是一個簡易的web服務器。
下面這幅流程圖描述了這個編譯過程：

image

在git bash窗口執行npm run dev命令時，也可以觀察到編譯過程。

image

watchify是什麼東東呢？browserify的編譯是比較緩慢的，當一個browserify項目開始變大時，編譯打包的時間會變得較長。watchify是一個browserify的封裝，其在package.json中的配置和browserify是同樣的。它能夠持續件監視文件的改動，而且只從新打包必要的文件。在一個大型的項目中使用watchify，第一次打包的時候可能還會花較長時間，可是後續的編譯打包將消耗較短的時間。

更多的watchify信息，請參考：https://github.com/substack/watchify/

發佈時生成build.js

在理解了上述編譯過程後，發佈時build.js就不難理解了。

"build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"

執行npm run build命令能夠生成發佈時的build.js。

image

uglifyjs是基於nodejs的壓縮程序，用於壓縮HTML/CSS/JS，執行npm run build命令後生成的build.js就是通過壓縮的。

image

使用vue-browserify模板

simple-browserify模板用於構築基於browserify和vueify的開發環境，browserify模板則提供了更多內容：

  • 提供了ESLint：用於格式化JavaScript和檢查JavaScript代碼風格。
  • 提供了單元測試：使用PhantomJS with Karma + karma-jasmine + karma-browserify的單元測試, 支持ES2015和mock。

1.生成項目

從新打開一個git bash窗口，執行如下命令：

vue init browserify my-browserify-demo

browserify是項目模板，my-browserify-demo是項目名稱。

image

目錄下生成了一個文件夾my-browserify-demo：

image

文件目錄結構以下：

├─.babelrc		// babel配置文件
├─.eslintrc		// eslint配置文件
├─.gitignore	
├─index.html		// 主頁
├─karma.conf.js		// karma配置文件
├─package.json		// 項目配置文件
├─README.md  
├─dist			// 發佈目錄
│   ├─.gitkeep       
├─src			// 開發目錄	
│   ├─App.vue		// App.vue組件
│   ├─main.js		// 預編譯入口
│   ├─components		// 組件目錄
│   ├──Hello.vue		// Hello.vue組件
├─test			// 單元測試目錄	
│   ├─unit	 
│   ├──Hello.spec.js	// Hello.vue單元測試

2. 安裝依賴

執行如下兩行命令，安裝項目依賴：

cd my-browserify-demo
npm install

image

（安裝過程較爲緩慢，須要耐心等待…）

3. 運行示例

執行npm run dev命令啓動http-server。

image

在瀏覽器中輸入地址127.0.0.1:8080，能夠看到如下畫面：

image

示例說明

注意main.js, App.vue和Hello.vue三者之間的關係。

main.js

import Vue from 'vue'
import App from './App.vue'

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

import Vue from 'vue'這行代碼表示引入vue.js，在編譯時會從node_modules文件夾下尋找vue.js。

image

import App from './App.vue' 表示引入同目錄下的App.vue組件。

image

App.vue

<template>
  <div id="app">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

import Hello from './components/Hello.vue' 表示引入components目錄下的Hello.vue組件。

Hello.vue是App.vue的子組件：

export default {
  components: {
    Hello
  }
}

Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // Note: modifying `msg` below will not cause changes to occur with
      // hot-reload. As reloaded components preserve their initial state,
      // modifying these values will have no effect.
      msg: 'Hello World!'
    }
  }
}
</script>

Hello.vue組件沒有任何依賴，它僅僅輸出一段簡單的文字。

vue-browserify-simple示例

介紹完了這兩種模板，咱們就來作個小示例吧，下面這個示例使用的是vue-browserify-simple模板。

├─.babelrc		// babel配置文件
├─.gitignore	
├─index.html		// 主頁
├─package.json		// 項目配置文件
├─README.md  
├─dist			// 發佈目錄
│   ├─.gitkeep       
├─src			// 開發目錄	
│   ├─App.vue		// App.vue組件
│   ├─main.js		// 預編譯入口
│   ├─components		// 組件目錄
│   ├──SimpeGrid.vue	// SimpleGrid.vue組件
│   ├─assets		// 靜態資源文件目錄
│   ├──app.css		// app.css

該示例的代碼我就不貼出來了，你們能夠到本文開頭的GitHub地址去下載。

image

View Demo

總結

vue.js官方提供的browserify項目模板，可讓咱們很輕鬆地投入到vue.js的組件開發中。熟練使用這樣的模板項目，不只將組件代碼給分離出來了，使得組件能夠被重複利用，並且有助於組件代碼的管理。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程