環(huán)境搭建

第1步：安裝Node.js

去node.js官網(wǎng)下載windows對應(yīng)版本光羞，安裝即可衍慎。

驗證node.js是否安裝成功：

node -v

npm -v

第2步：解決npm安裝第三方模塊很慢問題，建議使用cnpm淘寶鏡像

官網(wǎng)地址：https://developer.aliyun.com/mirror/NPM?from=tnpm


# 全局安裝cnpm這個工具

# -g 表示全局安裝，一次安裝四瘫，永久使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

第3步：安裝vue腳手架工具


# -g 表示全局安裝

cnpm install @vue/cli -g

第4步：創(chuàng)建vue項目


# 先進入目標目錄

vue create vue-study

# 在創(chuàng)建項目的過程中，可能會涉及到vue版本的選擇欲逃，建議選擇2.0

# 如果還需要選擇包管理工具找蜜，建議使用 npm

第5步：啟動vue項目


# 進入項目的根目錄

npm run serve

# 在瀏覽器中通過本地服務(wù)來訪問vue項目

# 自己配置一個start命令

npm start

如果當前代碼沒有node_modules包

執(zhí)行cnpm install可以根據(jù)package.json文件進行重裝

項目目錄結(jié)構(gòu)說明

1、node_modules

是整個vue程序運行所必須的依賴稳析，不能隨便改

當你分享代碼時洗做，node_modules不用給別人

2、package.json

是整個應(yīng)用程序的說明文件

它記錄當前應(yīng)用程序所需要的第三方包

它還指定項目若干操作命令

3彰居、public

是本地靜態(tài)資源服務(wù)目錄

4诚纸、src

是源碼目錄，工作中寫代碼的地方

main.js是應(yīng)用程序的入口文件

App.vue 可根組件陈惰、容器組件

路由

作用：用于實現(xiàn)單頁面應(yīng)用程序

第1步：安裝vue-router


cnpm install vue-router -S

# -S 表示安裝完成時畦徘，同步把這個包記錄在package.json文件'dependencies'中

# -D 表示安裝完成時，同步把這個包記錄在package.json文件'devDependencies'中

# -g 表示全局安裝這個包抬闯，一次安裝井辆，永久使用

第2步：在src根目錄，新建一個router.js的文件溶握，代碼如下


# 引入VueRouter類杯缺，并注冊

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

# 引入路由匹配所需要的組件

import Home from './pages/Home.vue'

import Find from './pages/Find.vue'

# 創(chuàng)建路由實例，并拋出

export default new VueRouter({

  routes: [

    { path: '/home', component: Home },

    { path: '/find', component: Find }

  ]

})

第3步：在main.js中掛載路由


import router from './router.js'

new Vue({

  router,  

  render: h=>h(),

  el: '#app',

})

第4步：在App組件中使用<router-view></router-view>來承載路由匹配成功的組件睡榆。

狀態(tài)管理

作用：1萍肆、實現(xiàn)組件之間的數(shù)據(jù) 2袍榆、用于實現(xiàn)緩存

提示：在vue應(yīng)用程序中，vuex不是必須的塘揣，是可選的

1包雀、安裝


cnpm install vuex -S

2、注冊并創(chuàng)建Store

在src根目錄創(chuàng)建 store.js 文件


import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {},

  mutations: {}

})

3亲铡、在main.js中掛載store


import store from './store'

new Vue({

  store

}).$mount('#app')

4馏艾、在組件中使用store


this.$store.state.msg 訪問store中共享的數(shù)據(jù)

# 修改store數(shù)據(jù)

this.$store.state.msg = 'new val' // 不建議這么做，因為在devTools中沒法調(diào)試

this.$store.commit('mutations方法', payload)

devTools的安裝

1奴愉、下載這個包琅摩，放在你喜歡的任何目錄下

https://github.com/arcliang/Vue-Devtools-

2、打開谷歌瀏覽器锭硼，點擊設(shè)置房资、打開設(shè)置

3、在設(shè)置頁面檀头，點擊“擴展程序”轰异，并開啟“開發(fā)者模式”

4、選擇“加載已解壓的擴展程序”暑始，選擇剛剛你下載的devTools/chrome文件夾

5搭独、關(guān)閉谷歌瀏覽器，就有了devTools這個調(diào)試工具

axios

簡介：它是基于Promise封裝 axios().then().catch().finall()

特點：可以用瀏覽器環(huán)境廊镜，也可用于Node.js環(huán)境

安裝：cnpm install axios -S

原理：客戶端請求服務(wù)端的數(shù)據(jù)是存在跨域問題的牙肝，而服務(wù)器和服務(wù)器之間可以相互請求數(shù)據(jù)，是沒有跨域的概念（如果服務(wù)器沒有設(shè)置禁止跨域的權(quán)限問題）嗤朴，也就是說配椭，可以配置一個代理的服務(wù)器可以請求另一個服務(wù)器中的數(shù)據(jù)，然后把請求出來的數(shù)據(jù)返回到我們的代理服務(wù)器中雹姊，代理服務(wù)器再返回數(shù)據(jù)給我們的客戶端股缸，這樣我們就可以實現(xiàn)跨域訪問數(shù)據(jù)啦。(注：要跨域請求數(shù)據(jù)吱雏，在配置文件里設(shè)置代理敦姻，需要在根目錄自己創(chuàng)建一個vue.config.js，在里面寫配置歧杏。)


module.exports = {

  devServer: {

    proxy: {

      "/api": {

        target: "http://10.36.138.122:9999", //目標路徑镰惦，別忘了加http和端口號

        changeOrigin: true, //是否跨域

        ws: true,

      },

    },

  },

};

文檔：https://www.npmjs.com/package/axios

Vue項目環(huán)境搭建