npm, webpack, vue-cli, vue-x, axios
1,什麼是node.js,以及npmcss
簡單的來講Node.js就是運行在服務端的JavaScript,是基於Chrome V8引擎的.npm是Node.js包的管理工具.vue
2,npm的安裝和更新node
Node.js下載安裝Node.js官網下載安裝.npm自帶的包管理工具.jquery
- node - v 查看Node.js版本信息;
- npm - v 查看npm版本信息
更新到npm指定版本:webpack
- npm install npm@5.3.0 - g
- npm install npm@latest - g更新最新的穩定版本
npm經常使用操做ios
以前咱們用jQuery或者Bootstrap用cdn或者直接手動下載並放入項目,並且要管理版本.有了npm,咱們管理本身的依賴包以及版本更加簡單web
到本身項目下,進行下列命令:ajax
- npm init -y 輸入-y使用默認配置項生成package.json文件.
- npm i jquery@0.0.0 簡寫install爲 i 下載依賴 不寫@默認最新版本
- npm uninstall jquery 卸載依賴包
- npm update jquery 更新依賴包
- npm list 列出已安裝的依賴
- npm install webpack--D保存爲開發環境依賴
- 老版本須要--save參數 如今不須要來了
咱們的項目目錄下會生成一個node_modules目錄,咱們用npm下的包會在這個目錄下.vuex
咱們全部的依賴信息放在package.json文件中,包括咱們全部的依賴以及版本vue-cli
若是咱們刪掉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'
}
},
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 install-g@vue/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 xxxx@0.0.0
卸載 ------->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
- 基本的配置
-
View Code
// main.js import axios from "axios" Vue.prototype.$axios = axios // 組件中 methods: { init () { this.$axios({ method: "get", url: "/user" }) }, }; - 基本的使用
- 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(){})
- 1. Vue 5 -- axios、vuex
- 2. Vuex+axios
- 3. vue.js webpack+vueCli環境搭建
- 4. Vuex以及axios
- 5. axios和vuex
- 6. Vue、vue-router、vuex、axios 介紹
- 7. Vuex與Axios
- 8. Vue+webpack+axios項目實戰
- 9. Vuex與axios介紹
- 10. vuex在vuecli中的簡單使用
- 更多相關文章...
- • ionic 安裝 - ionic 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。