vue前端工程化
1.可以瞭解模塊化的相關規範 2.瞭解webpack3.瞭解使用Vue單文件組件4.可以搭建Vue腳手架 5.掌握Element-UI的使用 css
1.模塊化的分類
A.瀏覽器端的模塊化
1).AMD(Asynchronous Module Definition,異步模塊定義)
表明產品爲：Require.js
2).CMD(Common Module Definition,通用模塊定義)
表明產品爲：Sea.js
B.服務器端的模塊化
服務器端的模塊化規範是使用CommonJS規範：
1).使用require引入其餘模塊或者包
2).使用exports或者module.exports導出模塊成員
3).一個文件就是一個模塊，都擁有獨立的做用域
C.ES6模塊化
ES6模塊化規範中定義：
1).每個js文件都是獨立的模塊
2).導入模塊成員使用import關鍵字
3).暴露模塊成員使用export關鍵字
小結：推薦使用ES6模塊化，由於AMD，CMD侷限使用與瀏覽器端，而CommonJS在服務器端使用。html
ES6模塊化是瀏覽器端和服務器端通用的規範.
2.在NodeJS中安裝babel
A.安裝babel
打開終端，輸入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安裝完畢以後，再次輸入命令安裝：npm install --save @babel/polyfill
B.建立babel.config.js
在項目目錄中建立babel.config.js文件。
編輯js文件中的代碼以下：
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
//暴露
module.exports = { presets }
C.建立index.js文件
在項目目錄中建立index.js文件做爲入口文件
在index.js中輸入須要執行的js代碼，例如：
console.log("ok");
D.使用npx執行文件
打開終端，輸入命令：npx babel-node ./index.js
3.設置默認導入/導出
A.默認導出
export default {
成員A,
成員B,
.......
},以下：
let num = 100;
export default{
num
}
B.默認導入
import 接收名稱 from "模塊標識符"，以下：
import test from "./test.js"
注意：在一個模塊中，只容許使用export default向外默認暴露一次成員，千萬不要寫多個export default。若是在一個模塊中沒有向外暴露成員，其餘模塊引入該模塊時將會獲得一個空對象 前端
4.設置按需導入/導出
A.按需導出
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }
B.按需導入
import { num,fn as printFn ,myName } from "./test.js"
//同時導入默認導出的成員以及按需導入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"
注意：一個模塊中既能夠按需導入也能夠默認導入，一個模塊中既能夠按需導出也能夠默認導出vue
5.直接導入並執行代碼
import "./test2.js";
6.webpack的概念
webpack是一個流行的前端項目構建工具，能夠解決目前web開發的困境。webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提升了開發效率和項目的可維護性node
7.webpack的基本使用
A.建立項目目錄並初始化
建立項目，並打開項目所在目錄的終端，輸入命令：
npm init -y
來初始化包管理配置文件package.json
B.建立首頁及js文件
在項目目錄中建立index.html頁面，並初始化頁面結構：在頁面中擺放一個ul，ul裏面放置幾個li
在項目目錄中建立js文件夾，並在文件夾中建立index.js文件
C.安裝jQuery
打開項目目錄終端，輸入命令:
npm install jQuery -S
D.導入jQuery
打開index.js文件，編寫代碼導入jQuery並實現功能：
import $ from "jquery";
$(function(){
$("li:odd").css("background","cyan");
$("li:odd").css("background","pink");
})
注意：此時項目運行會有錯誤，由於import $ from "jquery";這句代碼屬於ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題因此咱們須要webpack來幫助咱們解決這個問題。jquery
E.安裝webpack
1).打開項目目錄終端，輸入命令:
npm install webpack webpack-cli -D
2).而後在項目根目錄中，建立一個 webpack.config.js 的配置文件用來配置webpack
在 webpack.config.js 文件中編寫代碼進行webpack配置，以下：
module.exports = {
mode:"development"//能夠設置爲development(開發模式)，production(發佈模式)
}
補充：mode設置的是項目的編譯模式。
若是設置爲development則表示項目處於開發階段，不會進行壓縮和混淆，打包速度會快一些
若是設置爲production則表示項目處於上線發佈階段，會進行壓縮和混淆，打包速度會慢一些
3).修改項目中的package.json文件添加運行腳本dev，以下：
"scripts":{
"dev":"webpack"
}
注意：scripts節點下的腳本，能夠經過 npm run 運行，如：
運行終端命令：npm run dev
將會啓動webpack進行項目打包
4).運行dev命令進行項目打包，並在頁面中引入項目打包生成的js文件
打開項目目錄終端，輸入命令:
npm run dev
等待webpack打包完畢以後，找到默認的dist路徑中生成的main.js文件，將其引入到html頁面中。
瀏覽頁面查看效果。
8.設置webpack的打包入口/出口
在webpack 4.x中，默認會將src/index.js 做爲默認的打包入口js文件
默認會將dist/main.js 做爲默認的打包輸出js文件
若是不想使用默認的入口/出口js文件，咱們能夠經過改變 webpack.config.js 來設置入口/出口的js文件，以下：
const path = require("path");
module.exports = {
mode:"development",
//設置入口文件路徑
entry: path.join(__dirname,"./src/xx.js"),
//設置出口文件
output:{
//設置路徑
path:path.join(__dirname,"./dist"),
//設置文件名
filename:"res.js"
}
}
9.設置webpack的自動打包
默認狀況下，咱們更改入口js文件的代碼，須要從新運行命令打包webpack，才能生成出口的js文件
那麼每次都要從新執行命令打包，這是一個很是繁瑣的事情，那麼，自動打包能夠解決這樣繁瑣的操做。
實現自動打包功能的步驟以下：
A.安裝自動打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
B.修改package.json中的dev指令以下：
"scripts":{
"dev":"webpack-dev-server"
}
C.將引入的js文件路徑更改成：<script src="/bundle.js"></script>
D.運行npm run dev，進行打包
E.打開網址查看效果：http://localhost:8080
注意：webpack-dev-server自動打包的輸出文件，默認放到了服務器的根目錄中.
補充：在自動打包完畢以後，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令：webpack
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
10.配置html-webpack-plugin
使用html-webpack-plugin 能夠生成一個預覽頁面。
由於當咱們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾，想要查看咱們的頁面
還須要點擊文件夾點擊文件才能查看，那麼咱們但願默認就能看到一個頁面，而不是看到文件夾或者目錄。
實現默認預覽頁面功能的步驟以下：
A.安裝默認預覽功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
B.修改webpack.config.js文件，以下：
//導入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//建立對象
const htmlPlugin = new HtmlWebpackPlugin({
//設置生成預覽頁面的模板文件
template:"./src/index.html",
//設置生成的預覽頁面名稱
filename:"index.html"
})
C.繼續修改webpack.config.js文件，添加plugins信息：
module.exports = {
......
plugins:[ htmlPlugin ]
}
11.webpack中的加載器
經過loader打包非js模塊：默認狀況下，webpack只能打包js文件，若是想要打包非js文件，須要調用loader加載器才能打包
loader加載器包含：
1).less-loader
2).sass-loader
3).url-loader:打包處理css中與url路徑有關的文件
4).babel-loader:處理高級js語法的加載器
5).postcss-loader
6).css-loader,style-loader
注意：指定多個loader時的順序是固定的，而調用loader的順序是從後向前進行調用
A.安裝style-loader,css-loader來處理樣式文件
1).安裝包
npm install style-loader css-loader -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader']
}
]
}
}
B.安裝less,less-loader處理less文件
1).安裝包
npm install less-loader less -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
C.安裝sass-loader,node-sass處理less文件
1).安裝包
npm install sass-loader node-sass -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
補充：安裝sass-loader失敗時，大部分狀況是由於網絡緣由，詳情參考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
D.安裝post-css自動添加css的兼容性前綴（-ie-,-webkit-）
1).安裝包
npm install postcss-loader autoprefixer -D
2).在項目根目錄建立並配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader','postcss-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
E.打包樣式表中的圖片以及字體文件
在樣式表css中有時候會設置背景圖片和設置字體文件，同樣須要loader進行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件
1).安裝包
npm install url-loader file-loader -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用來設置字節數，只有小於limit值的圖片，纔會轉換
//爲base64圖片
use:"url-loader?limit=16940"
}
]
}
}
F.打包js文件中的高級語法：在編寫js的時候，有時候咱們會使用高版本的js語法
有可能這些高版本的語法不被兼容，咱們須要將之打包爲兼容性的js代碼
咱們須要安裝babel系列的包
A.安裝babel轉換器
npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項目根目錄建立並配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
D.配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用來設置字節數，只有小於limit值的圖片，纔會轉換
//爲base64圖片
use:"url-loader?limit=16940"
},{
test:/\.js$/,
use:"babel-loader",
//exclude爲排除項，意思是不要處理node_modules中的js文件
exclude:/node_modules/
}
]
}
}
12.Vue單文件組件
傳統Vue組件的缺陷：全局定義的組件不能重名，字符串模板缺少語法高亮，不支持css(當html和js組件化時，css沒有參與其中)沒有構建步驟限制，只能使用H5和ES5，不能使用預處理器（babel）解決方案：使用Vue單文件組件，每一個單文件組件的後綴名都是.vue每個Vue單文件組件都由三部分組成1).template組件組成的模板區域2).script組成的業務邏輯區域3).style樣式區域web
代碼以下：chrome
<template>
組件代碼區域
</template>
<script>
js代碼區域
</script>
<style scoped>
樣式代碼區域
</style>
補充：安裝Vetur插件可使得.vue文件中的代碼高亮npm
配置.vue文件的加載器A.安裝vue組件的加載器
npm install vue-loader vue-template-compiler -D
B.配置規則：更改webpack.config.js的module中的rules數組
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其餘規則
{
test:/\.vue$/,
loader:"vue-loader",
}
]
}
}
13.在webpack中使用vue
上一節咱們安裝處理了vue單文件組件的加載器，想要讓vue單文件組件可以使用，咱們必需要安裝vue並使用vue來引用vue單文件組件。A.安裝Vue
npm install vue -S
B.在index.js中引入vue：import Vue from "vue"C.建立Vue實例對象並指定el，最後使用render函數渲染單文件組件
const vm = new Vue({
el:"#first",
render:h=>h(app)
})
14.使用webpack打包發佈項目
在項目上線以前，咱們須要將整個項目打包併發布。A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在項目打包以前，能夠將dist目錄刪除，生成全新的dist目錄
15.Vue腳手架
Vue腳手架能夠快速生成Vue項目基礎的架構。A.安裝3.x版本的Vue腳手架：
npm install -g @vue/cli
B.基於3.x版本的腳手架建立Vue項目：
1).使用命令建立Vue項目
命令：vue create my-project
選擇Manually select features(選擇特性以建立項目)
勾選特性能夠用空格進行勾選。
是否選用歷史模式的路由：n
ESLint選擇：ESLint + Standard config
什麼時候進行ESLint語法校驗：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)
是否保存爲模板：n
使用哪一個工具安裝包：npm
2).基於ui界面建立Vue項目
命令：vue ui
在自動打開的建立項目網頁中配置項目信息。
3).基於2.x的舊模板，建立Vue項目
npm install -g @vue/cli-init
vue init webpack my-project
C.分析Vue腳手架生成的項目結構
node_modules:依賴包目錄 public：靜態資源目錄 src：源碼目錄 src/assets:資源目錄 src/components：組件目錄 src/views:視圖組件目錄 src/App.vue:根組件 src/main.js:入口js src/router.js:路由js babel.config.js:babel配置文件 .eslintrc.js:
16.Vue腳手架的自定義配置
A.經過 package.json 進行配置 [不推薦使用]
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.經過單獨的配置文件進行配置，建立vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
17.Element-UI的基本使用
Element-UI:一套基於2.0的桌面端組件庫官網地址：http://element-cn.eleme.io/#/zh-CNA.安裝：
npm install element-ui -S
B.導入使用：
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)
相關文章
- 1. Vue前端工程化
- 2. vue-前端工程化
- 3. Vue前端工程化（2）
- 4. 前端工程化基礎-vue
- 5. Vue 前端工程化 Cli3和ElementUI
- 6. vue組件續和前端工程化
- 7. Vue基礎--前端工程化(一)
- 8. 前端工程化
- 9. 前端成神之路-vue前端工程化
- 更多相關文章...
- • Git 工作流程 - Git 教程
- • MySQL客戶端和服務器端工具集 - MySQL教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue前端工程化
- 2. vue-前端工程化
- 3. Vue前端工程化（2）
- 4. 前端工程化基礎-vue
- 5. Vue 前端工程化 Cli3和ElementUI
- 6. vue組件續和前端工程化
- 7. Vue基礎--前端工程化(一)
- 8. 前端工程化
- 9. 前端成神之路-vue前端工程化