前言
搭建Vue+Webpack項(xiàng)目塑陵，使用vue-cli搭建項(xiàng)目。
準(zhǔn)備
vue獨(dú)立項(xiàng)目依賴node的npm包管理器蜡励，所以需要先安裝node令花。
相關(guān)的npm常用命令文章：
步驟
安裝vue-cli腳手架
npm install -g vue-cli
選擇webpack模板
# vue init webpack 項(xiàng)目名稱
vue init webpack lx-note-front
vue初始化項(xiàng)目-2019920211313
等待命令執(zhí)行完畢兼都。
vue初始化項(xiàng)目初始化結(jié)果-201992021157
由以上界面我們可以看到嫂沉，要想運(yùn)行該項(xiàng)目，可以執(zhí)行命令：<code>cd lx-note-front</code> 打開項(xiàng)目目錄扮碧，命令執(zhí)行完成后的項(xiàng)目結(jié)構(gòu)：
vue初始化項(xiàng)目初始化結(jié)果項(xiàng)目結(jié)構(gòu)-2019920211645
運(yùn)行項(xiàng)目
執(zhí)行命令<code>npm run dev</code> 命令啟動(dòng)該項(xiàng)目趟章，項(xiàng)目啟動(dòng)效果如下：
vue項(xiàng)目運(yùn)行效果-2019920212216
出現(xiàn)以上界面說(shuō)明我們已經(jīng)搭建成功。
項(xiàng)目目錄講解
- build: webpack配置相關(guān)慎王；
- build.js: npm run build所執(zhí)行的腳本蚓土；
- 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環(huán)境的配置确丢；
- webpack.prod.conf.js: prod環(huán)境的配置；
- config: 環(huán)境變量配置吐限；
- dev.env.js: dev環(huán)境變量配置蠕嫁；
- index.js dev和prod環(huán)境的一些基本配置；
- prod.env.js: prod環(huán)境變量配置毯盈；
- node_modules: npm安裝的依賴代碼庫(kù)；
- src: 項(xiàng)目源碼病袄；
- static: 存放css搂赋、js等靜態(tài)資源；
- .gitkeep: 使這個(gè)空文件也能夠提交到版本庫(kù)益缠；
- .babbelrc: babel相關(guān)配置（babel：將ES6語(yǔ)法轉(zhuǎn)換成大多數(shù)瀏覽器可以識(shí)別的ES5語(yǔ)法）脑奠；
- .editorconfig: 編輯器的配置，修改編碼幅慌、縮進(jìn)等宋欺；
- .eslintignore: 設(shè)置忽略語(yǔ)法檢查的目錄文件；
- .eslintrc.js: eslint的配置文件胰伍，管理和檢測(cè)js代碼風(fēng)格的工具齿诞；
- .gitignore: git不納入版本，需要忽略的文件骂租；
- .postcssrc.js: 用于添加瀏覽器私綴（兼容不同瀏覽器的css樣式）祷杈；
- index.html: 入口html文件；
- package-lock.json: 是鎖定安裝時(shí)的包的版本號(hào)渗饮，并且需要上傳到git但汞，用以保證開發(fā)人員的開發(fā)環(huán)境一致宿刮；
- package.json: 項(xiàng)目的配置文件，項(xiàng)目描述私蕾、命令僵缺、依賴插件等；
- README.md: 項(xiàng)目描述等主要文檔踩叭；
webpack打包vue項(xiàng)目
webpack是什么磕潮？
webpack是個(gè)模塊打包器，能夠根據(jù)html懊纳、css揉抵、js、圖片等文件之間的依賴關(guān)系將所有的模塊打包起來(lái)嗤疯。
# 重新生成打包js
webpack --display-modules --display-chunks --config webpack.config.js
# 實(shí)時(shí)自動(dòng)打包 webpack -w
webpack --watch
# 顯示異常信息
webpack --display-error-details
# 壓縮混淆腳本
webpack -p
# 提供source map冤今，方便調(diào)式代碼
webpack -d
webpack vue項(xiàng)目中安裝Bootstrap
Bootstrap依賴jQuery，因此引入Bootstrap之前需要引入jQuery茂缚，jQuery依賴popper.js：
安裝過(guò)程：
- 安裝popper
- 安裝jquery
- 安裝bootstrap
引入popper依賴
npm install popper.js --save-dev
引入jQuery依賴
npm install jquery
# 或者限定jQuery的版本
npm install jquery@3.3.1 --save-dev
引入Bootstrap依賴
npm install bootstrap@3.4.1 --save-dev
引入jquery和bootstrap
- 在build目錄下的webpack.base.conf.js中加入：
const webpack = require('webpack')
- 配置jQuery：在上述文件中找到 module.exports找到plugins戏罢，沒有的話請(qǐng)創(chuàng)建，格式如下：
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的樣式及帶有$符號(hào)的方法可以測(cè)試是否引入成功脚囊。
引入其他插件
npm install bootstrap-table@1.14.2 --save-dev
npm install admin-lte@2.4.5 --save-dev
npm install bootstrap-dialog@1.34.6 --save-dev
npm install bootstrapvalidator@0.5.4 --save-dev
