前言

搭建Vue+Webpack專案，使用vue-cli搭建專案。

準備

vue獨立專案依賴node的npm包管理器，所以需要先安裝node。
相關的npm常用命令文章：

• Npm-常用命令，點選訪問
• Vue官方文件，點選訪問

步驟

安裝vue-cli腳手架

npm install -g vue-cli

選擇webpack模板

# vue init webpack 專案名稱
vue init webpack lx-note-front

等待命令執行完畢。

由以上介面我們可以看到，要想執行該專案，可以執行命令：cd lx-note-front 開啟專案目錄，命令執行完成後的專案結構：

執行專案

執行命令npm run dev 命令啟動該專案，專案啟動效果如下：

出現以上介面說明我們已經搭建成功。

專案目錄講解

• build: webpack配置相關；
  • build.js: npm run build所執行的指令碼；
  • check-versions.js: 檢查npm和node的版本；
  • utils.js: 工具方法，主要用於生成CSSLoader和styleLoader配置；
  • vue-loader.conf.js: vueloader的配置資訊；
  • webpack.base.conf.js: dev和prod的公共配置；
  • webpack.dev.conf.js: dev環境的配置；
  • webpack.prod.conf.js: prod環境的配置；
• config: 環境變數配置；
  • dev.env.js: dev環境變數配置；
  • index.js dev和prod環境的一些基本配置；
  • prod.env.js: prod環境變數配置；
• node_modules: npm安裝的依賴程式碼庫；
• src: 專案原始碼；
• static: 存放css、js等靜態資源；
  • .gitkeep: 使這個空檔案也能夠提交到版本庫；
• .babbelrc: babel相關配置（babel：將ES6語法轉換成大多數瀏覽器可以識別的ES5語法）；
• .editorconfig: 編輯器的配置，修改編碼、縮排等；
• .eslintignore: 設定忽略語法檢查的目錄檔案；
• .eslintrc.js: eslint的配置檔案，管理和檢測js程式碼風格的工具；
• .gitignore: git不納入版本，需要忽略的檔案；
• .postcssrc.js: 用於新增瀏覽器私綴（相容不同瀏覽器的css樣式）；
• index.html: 入口html檔案；
• package-lock.json: 是鎖定安裝時的包的版本號，並且需要上傳到git，用以保證開發人員的開發環境一致；
• package.json: 專案的配置檔案，專案描述、命令、依賴外掛等；
• README.md: 專案描述等主要文件；

webpack打包vue專案

webpack是什麼？

webpack是個模組打包器，能夠根據html、css、js、圖片等檔案之間的依賴關係將所有的模組打包起來。

# 重新生成打包js
webpack --display-modules --display-chunks --config webpack.config.js
# 實時自動打包 webpack -w
webpack --watch
# 顯示異常資訊
webpack --display-error-details
# 壓縮混淆指令碼
webpack -p 
# 提供source map，方便調式程式碼
webpack -d

webpack vue專案中安裝Bootstrap

Bootstrap依賴jQuery，因此引入Bootstrap之前需要引入jQuery，jQuery依賴popper.js：
安裝過程：

1. 安裝popper
2. 安裝jquery
3. 安裝bootstrap

引入popper依賴

npm install popper.js --save-dev

引入jQuery依賴

npm install jquery
# 或者限定jQuery的版本
npm install [email protected] --save-dev

引入Bootstrap依賴

npm install [email protected] --save-dev

引入jquery和bootstrap

1. 在build目錄下的webpack.base.conf.js中加入：

const webpack = require('webpack')

1. 配置jQuery：在上述檔案中找到 module.exports找到plugins，沒有的話請建立，格式如下：

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'windows.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
  ]

在main.js 中引入jQuery和bootstrap

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

完了之後可以新增bootstrap的樣式及帶有$符號的方法可以測試是否引入成功。

引入其他外掛

npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev