12306的網(wǎng)站多少錢做的今天的特大新聞有哪些
Vue工程化項目
隨著多年的發(fā)展，前端越來越模塊化、組件化、工程化，這是前端發(fā)展的大趨勢。webpack是目前用于構(gòu)建前端工程化項目的主流工具之一，也正變得越來越重要。本章節(jié)我們來詳細講解一下如何使用webpack搭建Vue工程化項目。
1 使用webpack構(gòu)建Vue項目
1.1 什么是webpack
Webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器（static module bundler）。在 Webpack 處理應(yīng)用程序時，它會在內(nèi)部創(chuàng)建一個依賴圖（dependency graph），用于映射到項目需要的每個模塊，然后將所有這些依賴生成到一個或多個 bundle。
Webpack 可以做到按需加載。像 Grunt、Gulp 這類構(gòu)建工具，打包的思路是：
遍歷源文件 > 匹配規(guī)則 > 打包
這個過程中做不到按需加載，即對于打包起來的資源，到底頁面用不用，打包過程中是不關(guān)心的。
Webpack 跟其他構(gòu)建工具本質(zhì)上不同之處在于：Webpack 是從入口文件開始，經(jīng)過模塊依賴加載、分析和打包三個流程完成項目的構(gòu)建。在加載、分析和打包的三個過程中，可以針對性的做一些解決方案，達到按需加載的目的，比如code split（拆分公共代碼等）。
當然，Webpack 還可以輕松的解決傳統(tǒng)構(gòu)建工具解決的問題：
- 模塊化打包
- 語法糖轉(zhuǎn)換
- 預處理器編譯
- 項目優(yōu)化
- 解決方案封裝
- 流程對接
1.2 webpack中配置Vue開發(fā)環(huán)境
在webpack中配置Vue開發(fā)環(huán)境的過程如下。
項目初始化
在硬盤上創(chuàng)建項目的根目錄，例如 d:\myapp，在 myapp 目錄下啟動命令行工具，執(zhí)行以下命令：
npm init -y
上面命令運行成功后，會在myapp目錄下自動創(chuàng)建package.json文件。
安裝依賴
在myapp目錄下的命令行工具中，依次執(zhí)行以下命令：
# 安裝 vue 依賴
npm i vue# 安裝 webpack 和 webpack-cli 開發(fā)依賴
npm i webpack webpack-cli -D# 安裝 babel
npm i babel-loader @babel/core @babel/preset-env -D# 安裝 loader
npm i vue-loader vue-template-compiler -D# 安裝 html-webpack-plugin
npm i html-webpack-plugin -D
創(chuàng)建目錄結(jié)構(gòu)與文件
在myapp目錄下依次新建 public 和 src 目錄。
在public目錄下新建 index.html 文件代碼如下：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>Webpack Vue Demo</title></head><body><div id="app"></div></body>
</html>
在src目錄下分別新建main.js和App.vue文件。
main.js文件代碼如下：
import Vue from 'vue';
import App from './App.vue';Vue.config.productionTip = false;new Vue({render: h => h(App)
}).$mount('#app');
App.vue文件代碼如下：
<template><div id="app">Hello Vue & Webpack</div>
</template><script>export default {};
</script>
配置webpack.config.js
在myapp目錄下新建 webpack.config.js配置文件，配置內(nèi)容如下：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {enter: './src/main.js',resolve: {alias: {vue$: 'vue/dist/vue.esm.js'},extensions: ['*', '.js', '.vue', '.json']},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader'}},{test: /\.vue$/,loader: 'vue-loader'}]},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: './public/index.html',filename: 'index.html'})]
};
Vue 的配置文件中關(guān)于 Vue 語法的模板需要使用vue-loader來處理。完成上面配置后，執(zhí)行下npx webpack看下 dist 輸出結(jié)果。
1.3 webpack配置本地服務(wù)器
webpack-dev-server 就是一個 Express 的小型服務(wù)器，它是通過 Express 的中間件 webpack-dev-middleware和 Webpack 進行交互的。在開發(fā)過程中，如果項目本身就是個 Express 服務(wù)器，那么可以使用 webpack-dev-middleware 和 webpack-hot-middleware 兩個中間件來實現(xiàn) HMR 功能。
webpack-dev-server具體操作如下。
安裝與啟動
webpack-dev-server安裝命令如下：
npm i webpack-dev-server
安裝成功后，執(zhí)行以下命令啟動本地服務(wù)器：
npx webpack-dev-server
執(zhí)行webpack-dev-server命令之后，它會讀取 Webpack 的配置文件（默認是 webpack.config.js）然后將文件打包到內(nèi)存中（所以看不到dist文件夾的生產(chǎn)，Webpack 會打包到硬盤上），這時候打開 server 的默認地址：localhost:8080就可以看到文件目錄或者頁面（默認是顯示 index.html，沒有則顯示目錄）。
自動刷新
在開發(fā)中，我們希望邊寫代碼，邊看到代碼的執(zhí)行情況，webpack-dev-server 提供自動刷新頁面的功能可以滿足我們的需求。webpack-dev-server 支持兩種模式的自動刷新頁面。
- iframe模式：頁面被放到一個 iframe 內(nèi)，當發(fā)生變化時，會重新加載；
- inline模式：將 webpack-dev-server 的重載代碼添加到產(chǎn)出的 bundle 中。
兩種模式都支持模塊熱替換（Hot Module Replacement）。模塊熱替換的好處是只替換更新的部分，而不是整個頁面都重新加載。
執(zhí)行以下命令開啟自動刷新：
webpack-dev-server --hot --inline
2 Vue CLI腳手架工具
Vue CLI是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)，致力于將 Vue 生態(tài)中的工具基礎(chǔ)標準化。它確保了各種構(gòu)建工具能夠基于智能的默認配置即可平穩(wěn)銜接，這樣就可以使開發(fā)者只專注與撰寫應(yīng)用，而不必浪費很多時間去研究項目搭建中配置的問題。
Vue CLI 有以下幾個獨立的部分。
CLI
CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。它可以通過 vue create 快速搭建一個新項目，或者直接通過 vue serve 構(gòu)建原型。
CLI服務(wù)
CLI 服務(wù) (@vue/cli-service) 是一個開發(fā)環(huán)境依賴，屬于一個 npm 包，局部安裝在每個 @vue/cli 創(chuàng)建的項目中。CLI 服務(wù)是構(gòu)建于 webpack 和 webpack-dev-server 之上的。
CLI插件
CLI 插件是向 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成、單元測試和 end-to-end 測試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內(nèi)建插件) 或 vue-cli-plugin- (社區(qū)插件) 開頭，非常容易使用。
2.1 腳手架安裝
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)。更新依賴版本命令如下：
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
安裝之后，就可以在命令行中訪問 vue 命令。還可以通過運行一些簡單的 vue 命令來驗證它是否安裝成功。
例如，可以執(zhí)行命令來檢查其版本，命令如下：
vue --version
如需升級全局的 Vue CLI 包，可以運行以下命令：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
2.2 使用腳手架創(chuàng)建Vue項目
運行以下命令來創(chuàng)建一個新項目：
# myapp為項目名
vue create myapp
執(zhí)行上面的命令會被提示選取一個 preset?？梢赃x默認的包含了基本的 Babel + ESLint 設(shè)置的 preset，也可以選“手動選擇特性”來選取需要的特性，如下圖所示。
默認的設(shè)置非常適合快速創(chuàng)建一個新項目的原型，而手動設(shè)置則提供了更多的選項，它們是面向生產(chǎn)的項目更加需要的。如果使用了手動選擇特性，在操作提示的最后可以選擇將已選項保存為一個將來可復用的 preset。
具體的選項操作可以參考下圖所示。
上面的選項執(zhí)行完成后，會提示如何啟動項目，如下圖所示。
根據(jù)命令行工具的提示，依次執(zhí)行下面命令，即可啟動項目：
# 進入項目目錄
cd myapp
# 啟動項目
npm run serve
上面命令執(zhí)行成功后，會在命令行工具顯示項目的IP地址和端口號，如下圖所示。
在Google Chrome瀏覽器中訪問http://localhost:8080打開項目的首頁，效果如下圖所示。
4.2.3 項目結(jié)構(gòu)與文件描述
把創(chuàng)建好的項目在Visual Studio Code（以下簡稱VSCode）開發(fā)工具中打開，項目的目錄結(jié)構(gòu)如下圖所示。
目錄結(jié)構(gòu)解析
vue-cli4.0版本腳手架工具創(chuàng)建的項目結(jié)構(gòu)如下表所示。
| 目錄/文件 | 說明 |
|---|---|
| node_modules | npm 加載的項目依賴模塊 |
| public | 用于存放靜態(tài)資源文件，啟動本地服務(wù)器后，該目錄為服務(wù)器訪問的根目錄。目錄下存放index.html文件 |
| src | 這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里。 |
| babel.config.js | babel相關(guān)的配置文件 |
| package.json | npm相關(guān)的配置文件 |
| package-lock.json | npm相關(guān)的配置文件，用于鎖定依賴包的版本號 |
| README.md | Markdown格式的項目說明文檔 |
index.html文件
public目錄下的index.html文件是項目的靜態(tài)頁面，當前創(chuàng)建的項目為單頁面應(yīng)用（SPA），所以整個項目中只有一個靜態(tài)的HTML文件，index.html文件代碼如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>
main.js文件
src為項目的源碼文件的管理目錄，項目中編寫的代碼都要放到這個目錄下，在該目錄下的main.js文件為整個項目的入口文件，關(guān)于項目的全局配置都要放到該文件中。
代碼如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')
App.vue文件
在src目錄下還有一個很重要的文件，就是項目的根組件App.vue文件，該文件一般用于項目的一級路由的管理。因為新建的項目中，會對App.vue編寫初始化的頁面內(nèi)容，而且這些內(nèi)容對后期的開發(fā)沒有價值，所以我們在正式開發(fā)前，會對App.vue文件進行修改。
代碼如下：
<template><div><router-view/></div>
</template><script>export default {}
</script>