VUE2 第六天學習--- vue單文件項目構建

時間 2019-11-17

標籤 vue2 vue 第六學習文件項目構建简体版

原文原文鏈接

閱讀目錄javascript

VUE2 第六天學習--- vue單文件項目構建

VUE2 第六天學習--- vue單文件項目構建css

VUE單文件組件
在Vue項目中，而後使用 new Vue({el: '#container' }), 在每一個頁面內指定一個容器元素。使用Vue.component來定義全局組件，這種方式在小規模項目中還能夠，可是在項目中有以下缺點：
1. 全局定義：強制要求每一個component中的命名不能重複。
2. 字符串模板：缺少語法高亮，在HTML有多行的時候，須要用到醜陋的 \
3. 不支持css，意味着HTML和javascript組件化時，css明顯被遺漏。
4. 沒有構建步驟，限制只能使用HTML和ES5 Javascript，而不能使用預處理器。
.vue 單文件組件能夠解決上面的全部問題，而且還可使用 webpack等構建工具。html

.vue文件是一個自定義的文件類型，用類HTML語法描述一個Vue組件。每一個 .vue文件包含三種類型的頂級語言塊 <template>,<script>,和 <style>,以下代碼：vue

<template>
  <div class="example">{{ msg }}</div>
</template>

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

<style>
.example {
  color: red;
}
</style>

vue-loader 會解析文件，提取每一個語言塊，經過loader處理，最後將他們組成一個CommonJS模塊。module.exports出一個Vue.js組件對象。
vue-loader 支持使用非默認語言，好比css預處理器，預編譯的HTML模板語言，經過設置語言塊的lang屬性。好比以下代碼：java

<style lang='stylus'>
  /* stylus代碼 */
</style>

語言塊
<template>
默認語言： html
每一個.vue文件最多包含一個 <template>塊
內容將被提取爲字符串，將編譯並用做Vue組件的template選項。node

<script>
默認語言： js(在檢測到 babel-loader 或 buble-loader 配置時自動支持ES2015)
每一個.vue文件最多包含一個<script>塊。
該腳本在類CommonJS環境中執行，也能夠經過require()其餘依賴，在ES2015支持下，可使用import 和 export 語法。
腳本必須導出 Vue.js 組件對象。也能夠導出由 Vue.extend()建立的擴展對象。可是普通對象將會更好。webpack

<style>
默認語言：css
一個 .vue文件能夠包含多個 <style> 標籤。
默認狀況下，將會使用 style-loader 提取內容，並經過 <style>標籤動態加入文檔的<head>中，也能夠配置將全部style提取到單個的css文件中。git

項目構建：
一：安裝項目依賴
npm install --save vue 默認安裝最新版vue
npm install --save-dev webpack webpack-dev-server 安裝webpack，webpack-dev-serveres6

提示： npm install --save 和 npm install --save-dev的區別，--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，--save-dev 則添加到 package.json 文件 devDependencies 鍵下，--save-dev 是你開發時候依賴的東西，--save 是你發佈以後還依賴的東西。*github

npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，babel的做用是將es6的語法編譯成瀏覽器認識的語法es5
npm install --save-dev vue-loader vue-template-compiler 用來解析vue的組件，.vue後綴的文件
npm install --save-dev css-loader style-loader stylus-loader 用來解析css

提示：css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(…)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

npm install --save-dev url-loader file-loader 用於打包文件和圖片
npm install --save-dev vue-router 安裝路由

二：項目目錄結構以下：

demo                                        # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |--- src                                # 項目的文件包
|   |    |--- assets                        # styles(樣式)，img(圖片)的目錄文件
|   |    |--- components                    # 一些組件的目錄，好比 header.vue 等
|   |    |--- views                         # 存放單個頁面全部vue文件
|   |    |--- App.vue                       # 項目的入口文件
|   |    |--- index.js                      # 實例化的js入口文件
|   |    |--- routes.js                     # 路由配置文件
|   |---
|   |--- .babelrc                           # 支持es6      
|   |--- .gitignore
|   |--- README.md
|   |--- index.html                         # 首頁入口文件
|   |--- package.json                      
|   |--- webpack.config.js                  # 配置文件

三：項目運行
執行 webpack 打包；
執行 webpack-dev-server 啓動服務器；

四：轉換命令
把 webpack 和 webpack-dev-server 命令轉成 npm 命令；須要安裝 cross-env 命令以下：
npm install cross-env --save-dev
而後在package.json 文件添加
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "webpack"

如今可使用 npm run dev 運行命令。

git上查看demo