npm, webpack, vue-cli, vue-x, axios
1,什麼是node.js,以及npm
簡單的來說Node.js就是執行在服務端的JavaScript,是基於Chrome V8引擎的.npm是Node.js包的管理工具.
2,npm的安裝和更新
Node.js下載安裝Node.js官網下載安裝.npm自帶的包管理工具.
- node - v 檢視Node.js版本資訊;
- npm - v 檢視npm版本資訊
更新到npm指定版本:
- npm install [email protected] - g
- npm install [email protected] - g更新最新的穩定版本
npm常用操作
之前我們用jQuery或者Bootstrap用cdn或者直接手動下載並放入專案,而且要管理版本.有了npm,我們管理自己的依賴包以及版本更加簡單
到自己專案下,進行下列命令:
- npm init -y 輸入-y使用預設配置項生成package.json檔案.
- npm i [email protected] 簡寫install為 i 下載依賴 不寫@預設最新版本
- npm uninstall jquery 解除安裝依賴包
- npm update jquery 更新依賴包
- npm list 列出已安裝的依賴
- npm install webpack--D儲存為開發環境依賴
- 老版本需要--save引數 現在不需要來了
我們的專案目錄下會生成一個node_modules目錄,我們用npm下的包會在這個目錄下.
我們所有的依賴資訊放在package.json檔案中,包括我們所有的依賴以及版本
如果我們刪掉node_modules目錄,可以使用npm i 來下載所有依賴.
3,npm常用配置
當我們用npm init的時候用了引數-y, 如果不用-y我們可以進行一些配置,在我們的package.json檔案中有很多配置項
- name 專案名字 中間不能有空格只能用小寫
- version 專案版本
- description 專案描述資訊
- main 專案的入口檔案
- scripts指定命令的快捷方式 npm run test test是scripts裡的鍵名 值為具體命令
- auther 作者
- license 許可證
- dependencies 生成環境依賴的包及版本資訊
- devDependencies 開發環境的依賴
4,webpack3
webpack:是一個模組打包器,他將根據模組的依賴關係靜態分析,然後將這些模組按照指定的規則生產成靜態資源,
4.1,安裝和配置
webpack是跑在Node.js環境下的,所以確定有node環境
安裝方式:
- npm install webpack- g 全域性安裝
- webpack<要打包檔案><打包後文件>全域性這種方式進行打包
- npm install webpack 在自己的專案下npm init後再下載webpack這就是區域性安裝
- node_modules/.bin/webpack<要打包檔案><打包後文件>專案裡要打包檔案是入口檔案
- 路徑太長 太煩 可以自定義命令 在package.json中檔案的scripts下面定義
4.2,entry和output
entry是入口檔案,output是出口檔案,我們可以把命令寫在webpack.config.js中
module.export = {
// 所有的入口檔案
entry: {
home: './main.js',
login: './login.js',
},
// 出口檔案
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist',
}
}
// backage.json 下的scripts
scripts: {
"pack": "node_moudles/.bin/webpack --watch"
}
// 執行命令
npm run pack
5,webpack4
webpack的新特性
5.1,webpack不在單獨使用,需要webpack-cli
- 全域性安裝 npm install webpack webpack-cli-g-D
- 區域性安裝 npm install webpack webpack-cli- D
5.2,增加區分模式(development, production)
- webpack mode development/production進行模式切換
- development開發者模式,打包預設不壓縮程式碼
- production 生產者模式 上線時使用,壓縮程式碼,預設是這個模式
5.3,固定入口目錄為src,與入口預設檔案index.js,打包後文件在新增的dist目錄下
當只有一個入口檔案也就是src/index.js時,無需增加webpack.config.js
6,Vue-cli
Vue-cli是官方提供的快速構建這個單頁面應用的腳手架
- 前提是已經安裝了node.js否則npm都用不了
- 1,使用npm全域性安裝vue-cli,
- npm install-g vue-cli
- 2,安裝完成後在自己的工作空間裡
- vue init webpack vue-demo 輸入命令後進入安裝階段,需要使用者輸入一些資訊
- 3,切換到我們的目錄下
- cd vue-demo
- npm run dev
6.1,目錄結構
- build裡面是一些操作檔案,使用npm run *時其實執行的就是這裡的檔案
- config配置檔案,執行檔案需要的配置資訊
- src資原始檔,所有的元件以及所有的圖片都在這個資料夾下
- node_modules 專案依賴包
- static靜態檔案
- package.json依賴包的json檔案
7,Vue-cli配置jquery,bootstrap
7.1,下載安裝
- npm install jquery
- npm install bootstrap
7.2,修改build/webpackage.base.conf.js
const webpack = require('webpack')
// 在module.exports裡新增外掛
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
// Popper: ['popper.js', 'default']
})
],
// *******下面是如果手動下載bootstrap用的*******
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 如果是手動下載的bootstrap需要新增這個配置
// 'assets': path.resolve(__dirname, '../src/assets'),
// 'jquery': 'jquery/src/jquery'
}
},
View Code
7.3,修改主程式的就是檔案
import $ from 'jquery' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'
8,vue-cli 3.0
8.1,下載安裝
- npm [email protected]/cli
- 報錯 npm error 可執行下面命令
- npm cache clean--force && npm cache verify
8.2,建立專案
- vue create 專案名
- 之後會出現很多選項,根據自己的偏愛去選擇
8.3,目錄結構及其配置檔案
- vue-cli3目錄更加簡單
- 我們手動在專案下建立vue.config.js的配置信
8.4,vue-cli3配置jquery.bootstrap
據說和vue-cli2一樣
總之:在執行vue-cli和webpack都要執行node.js
1,先下載node.js這是一個步驟如下圖
一,在命令列輸入命令:
node.js/npm
npm
管理工作目錄 ---> npm init -y
下載包 ------>npm i [email protected]
解除安裝 ------->npm uninstall xxxx
更新 ------->npm update xxxx
webpack
下載 -------->npm i webpack webpack-cli
打包預設的入口檔案 ------->src目錄下的index.js
出口檔案 ------->dist目錄的main.js
vue-cli 幫助開發人員快速搭建專案的腳手架工具
下載 --------->npm i vue-cli
用vue-cli幫助我們建立專案 ------->vue init webpack xxxx
啟動專案 -------->npm run dev
9,vuex
- vuex是專門Vue.js設計的集中狀態管理架構,我們把它理解為在data中需要共享給其他元件使用額度部分,Vuex和單純的全域性物件有以下不同:
-
- Vuex的狀態儲存是響應式的,當Vue元件從store中讀取狀態的時候,若store中的狀態發生了變化,那麼響應的元件也會相應的得到高效更新(一榮俱榮,一損俱損,所以說Vuex的儲存是響應式的)
- 不能直接改變store中的狀態,改變store中的狀態唯一途徑就是顯示的提交(commit)mutation,這樣使得我們可以方便的跟蹤每一個狀態的變化,從而讓我們能夠實現一些工具來幫助我們瞭解我們的應用
- vuex的安裝和使用
命令列:npm i vuex
// 第一步匯入vuex
import vuex from "vuex"
// 第二步vue使用vuex
vue.use(vuex)
// 第三步例項化倉庫
new vuex.Store({
state: {},
getter: {},
mutations:{}
})
// 第四步例項化一個Vue物件
// 註冊倉庫
new Vue({
el:"#app".
store
})
- 獲取倉庫資料
-
- this.$store.state.xxx
- this.$store.getters.xxx
- 改變倉庫中的資料
-
- 元件向倉庫提交修改資料
- this.$store.commit("事件名稱", data)
- 在倉庫的mutations中
- mutations: {"事件名稱":function(state, data){修改state中的資料}}
- 注意計算屬性
- 倉庫中的資料建議都放在計算屬性中
- 元件向倉庫提交修改資料
- 引數說明State
-
- state是儲存我們data中需要共享的資料,由於Vuex的儲存是響應式的,從store例項中讀取狀態的最簡單方式,就是在計算屬性中返回某個狀態.this.$store.state.count
// 建立一個元件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count(){
return this.$store.state.count
}
}
};
- Getter引數的說明
- 有時候我們需要從store中的state中派生出一些狀態,例如對資料進行簡單的計算,並且很多元件都需要用到此方法,要麼複製這個函式,要麼抽取到一個公共函式,多出匯入,但是vuex提供了更加方便的方法 ,getter,就像計算屬性一樣,getter的返回值會根據它的依賴被快取起來,只有它的依賴發生改變時,才會重新計算,
- Getter會接收state作為第一個引數
import Vue from 'vue'
import Vue_x from "vuex"
Vue.use(Vue_x);
export default new Vue_x.Store({
state: {
count: 20,
},
// 通過 this.$store.getters.my_func
getters: {
my_func: function (state) {
return state.count * 2
}
},
});
- Getters也可以接收getters為第二個引數
import Vue from 'vue'
import Vue_x from "vuex"
Vue.use(Vue_x);
export default new Vue_x.Store({
state: {
count: 20,
},
// 通過 this.$store.getters.my_func
getters: {
my_func: function (state) {
return state.count * 2
},
// 通過 this.$store.getters.my_func_count
my_func_count: function (state, getters) {
return getters.my_func.length
}
},
});
- Mutation
- 更改vuex中的store中的狀態的唯一方法是提交mutation.
- 每個mutation都有一個字串的事件型別(type),和一個回撥函式handler
- 也就是說我們要觸發mutation中定義的方法(type),然後才會執行這個方法(handler)
- 這個方法就是我們要更改狀態的地方, 它會接收state為第一個引數,後面接收其他引數
import Vue from 'vue'
import Vue_x from "vuex"
Vue.use(Vue_x);
export default new Vue_x.Store({
state: {
count: 20,
},
// 需要通過 this.$store.commit('increment', 10)
mutations: {
increment (state, n) {
// 變更狀態
state.count += n
}
}
});
- Mutation需要遵循Vue的響應規則
- 既然Vuex中的store中的狀態是響應式的, name當我們狀態變更時, 監視狀態的vue元件也會更新.這就意味著vuex中的mutation也需要與使用vue一樣注意一些注意事項 :
-
- 最好提前在你的 store中初始化好所有需要的屬性
- 當物件需要新增屬性時,你應該使用:
- Vue.set(obj, 'newProp', 123)
- 以新物件代替老物件 state.obj={...state.obj, newProp:123}
10,axios的簡單使用
- 基於Promise的HTTP請求客戶端, 可以同時在瀏覽器額 node.js中使用
- 使用npm安裝axios: npm install axios -D
- 基本的配置
-
// main.js import axios from "axios" Vue.prototype.$axios = axios // 元件中 methods: { init () { this.$axios({ method: "get", url: "/user" }) }, };View Code - 基本的使用
- get請求
test(){
this.$axios.get(this.$store.state.apiList.course,{
params: {
id: 123,
}
}).then(function (response) {
// 請求成功回撥函式
}).catch(function (response) {
// 請求失敗的回撥函式
})
}
-
- post請求
test(){
this.$axios.post(this.$store.state.apiList.course,{
course_title: "Python",
course_price: "19.88"
}).then(function (response) {
// 請求成功回撥函式
}).catch(function (response) {
// 請求失敗的回撥函式
})
}
-
- 傳送多個併發請求
function getCourse(){
return this.$axios.get('/course/12')
}
function getCourse_all() {
return this.$axios.get('/course')
}
this.$axios.all([getCourse_all(),getCourse()])
.then().catch()
-
- axios.request那個人喜歡的
methods: {
init(){
var that = this
this.$axios.request({
url: that.$store.state.apiList.course,
method: 'get'
}).then(function (data) {
if (data.status === 200){
that.courseList = data.data
}
}).catch(function (reason) {
console.log(reason)
})
}
},
- axios是實現ajax技術的工具
- 下載: npm i axios
- 匯入: import axios from "axios"
- 在vue的原型鏈中加入方法:Vue.prototype.$axios = axios
- 傳送請求:this.$axios.request({url, method}).then(function(){}).catc(function(){})