一、axios
1、介紹
2、使用
<!DOCTYPE html>
<html lang="en">
<head>
<title>axios使用</title>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) in userList">
index：{{index}}
name：{{item.name}}
age：{{item.age}}
</div>
</div>
<script>
// 創建一個 vue 物件
new Vue({
// 系結 vue 的作用域
el : '#app',
// 定義頁面中顯示的資料模型
data : {
userList : []
},
// 頁面渲染之前執行
created() {
// 呼叫定義的方法
this.getUserList();
},
// 撰寫具體的方法
methods: {
getUserList() {
// axios.請求方式("請求介面").then().catch();
// then：請求成功執行的方法
// cath：請求失敗執行的方法
axios.get("data.json")
.then(response => {
console.log(response);
this.userList = response.data.data.item;
})
.catch(error => {
})
}
}
})
</script>
</body>
</html>
二、element-ui 組件
1、介紹
Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫，
官網：<Element - 網站快速成型工具>
三、node.js
1、介紹
官網：<Node.js (nodejs.org)>
2、使用
（1）新建 01.js 檔案
console.log('hello node.js！');
（2）在 01.js 檔案所在的路徑打開命令列視窗
（3）輸入命令
node 01.js
看到 hello node.js！ 就說明成功了！
四、npm
1、介紹
2、使用
（1）npm 專案初始化操作
在命令列視窗輸入命令：
npm init
初始化完成后會有一個 package.json 檔案，類似于 maven 的 pom 檔案，
# 使用默認的資訊初始化專案
npm init -y
（2）npm 下載 js 依賴
設定鏡像地址：
# 設定鏡像地址，這里使用的是淘寶的鏡像
npm config set registry https://registry.npm.taobao.org
# 查看 npm 配置資訊
npm config list
下載依賴：
# 例：npm install jquery@版本號
# 可以不指定版本號
npm install 依賴名稱
根據 package.json 檔案下載依賴：
npm install
五、babel
1、介紹
2、使用
（1）安裝 babel 工具，使用命令
npm install -global babel-cli
# 查看是否安裝成功
babel --version
（2）初始化專案
npm init -y
（3）創建 js 檔案
// 轉碼前
// 定義資料
let input = [1, 2, 3]
// 將陣列的每個元素 +1
input = input.map(item => item + 1)
console.log(input)
（4）配置 .babelrc
{
// 設定轉碼規則
"presets": ["es2015"],
"plugins": []
}
（5）安裝轉碼器
npm install --save-dev babel-preset-es2015
（6）轉碼
# 轉碼結果寫入一個檔案
mkdir dist1
# 指定檔案轉碼
# --out-file 或 -o 引數指定輸出檔案
babel src/example.js --out-file dist1/compiled.js
# 或者
【babel src/example.js -o dist1/compiled.js】
# 整個目錄轉碼
mkdir dist2
# --out-dir 或 -d 引數指定輸出目錄
babel src --out-dir dist2
# 或者
【babel src -d dist2】
六、模塊化
1、介紹
2、使用
（1）es5 寫法
01.js 檔案（定義方法）
// 1 定義方法
const sum = function(a, b) {
return parseInt(a) + parseInt(b);
}
const subtract = function(a, b) {
return parseInt(a) - parseInt(b);
}
// 2 設定你的哪些方法可以被其他 js 呼叫
module.exports = {
sum,
subtract
}
02.js 檔案（呼叫方法）
// 呼叫方法
// 1 引入 js
const m = require('./01.js');
// 2 呼叫
console.log(m.sum(1, 2));
console.log(m.subtract(1, 2));
（2）es6 寫法
注意：這時的程式無法運行的，因為 ES6 的模塊化無法在 Node.js 中執行，需要用 Babel 編輯成 ES5 后再執行，
第一種寫法：
匯出模塊：
export function getList() {
console.log('獲取資料串列')
}
export function save() {
console.log('保存資料')
}
匯入模塊：
//只取需要的方法即可，多個方法用逗號分隔
import { getList, save } from "./userApi.js"
getList()
save()
轉換成 es5：
babel es6model -d es6model_es5
第二種寫法
匯出模塊：
export default{
getList(){
console.log("獲取資料串列2");
},
save(){
console.log("保存資料2");
}
}
匯入模塊：
import user from "./userApi2"
user.getList();
user.save();
轉換成 es5：
babel es6model -d es6model_es5
七、webpack
1、介紹
Webpack 是一個前端資源加載/打包工具，它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源，減少了頁面的請求，
2、使用
（1）安裝 webpack 工具
npm install -g webpack webpack-cli
（2）安裝后查看版本號
webpack -v
（3）common.js 檔案
exports.info = function (str) {
document.write(str);//在瀏覽器中輸出
}
（4）創建 utils.js 檔案
exports.add = function (a, b) {
return a + b;
}
（5）創建 main.js 檔案
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!'+ utils.add(100,200));
（6）js 打包
webpack 目錄下創建組態檔 webpack.config.js
const path = require("path"); //Node.js內置模塊
module.exports = {
entry: './src/main.js', //配置入口檔案，main.js檔案中已經引入了另外兩個js檔案
output: {
path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前檔案所在路
徑,
filename: 'bundle.js' //輸出檔案
}
}
執行編譯命令
webpack # 有黃色警告
webpack --mode=development # 沒有警告
# 執行后查看bundle.js 里面包含了上面兩個js檔案的內容并驚醒了代碼壓縮
（7）CSS 打包
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他型別的檔案，就需要使用 loader 進行轉換，Loader 可以
理解為是模塊和資源的轉換器，
安裝style-loader和 css-loader：
npm install --save-dev style-loader css-loader
修改 webpack.config.js：
const path = require("path"); //Node.js內置模塊
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\.css$/, //打包規則應用到以css結尾的檔案上
use: ['style-loader', 'css-loader']
}
]
}
}
創建 body.css：
body{
background:pink;
}
修改 main.js：
在第一行引入 body.css：
require('./body.css');
執行打包指令：
webpack --mode=development
八、搭建專案前端環境
1、介紹
2、前端頁面框架介紹
使用框架：vue-admin-template-master
（1）程式入口
index.html、src/main.js
（2）主要基于兩種技術
vue、element-ui
（3）build 目錄
做一些編譯和專案構建之類
（4）config 目錄
專案的一些配置，比如埠號等
index.js（配置埠號）
dev.env.js（配置介面)
（5）node_module 目錄
一些專案的依賴
（6）src 目錄
- api 定義呼叫方法
- assets 放一些靜態資源
- component 其他插件
- icons 放一些圖示
- router 頁面中的路由部分
- store 放一些腳本檔案
- styles 放一些 css
- utils 放一些工具類
- views 專案中具體的頁面
3、前端頁面框架登錄問題
這個是正常的，服務器出問題了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295665.html
標籤：其他
上一篇：深拷貝與淺拷貝
下一篇：python基本語法要素