vue2.0項目搭建步驟（1）

1.創建vue項目：

npm install vue //安裝vue

npm install -g vue-cli //全局安裝 vue-cli

使用vue的腳手架直接在本地初始化項目
方法：命令行：vue init <template-name> <project-name>

template-name選項爲模板名稱，vue-cli官方爲我們提供了5種模板。

webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。

webpack-simple-一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。

browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。

browserify-simple-一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。

simple-一個最簡單的單頁應用模板。

project-name 爲項目名稱。 【項目名不能大寫】

這裏以常用的webpack爲例，
運行：vue init webpack shengyuan

爲了兼容低版本瀏覽器不兼容es6語法安裝babel-polyfill

npm install --save babel-polyfill

配置方法：@1：打開./build/webpack.base.conf.js，在下面的 entry 中

將原來的
entry: {
   app: './src/main.js',
 },
改爲：
entry: ['babel-polyfill', './src/main.js'];

@2：import 'babel-polyfill' //es6的API轉義

當在src文件夾外新建了文件使用了es6的時候爲了兼容ie 不出現空白頁面需要在babel-loader的配置添加該文件夾的路徑，加上之後就沒問題了 eg：在src外新建了一個static 文件裏面用到了es6 那麼需要在build/webpack.base.conf.js文件下的babel-loader部分添加配置resolve('static')

上面做完了自己在ie上運行發現還是報錯在網上搜索了一下發現

Babel 默認只轉換新的 JavaScript 句法，而不轉換新的 API，比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（比如 Object.assign）都不會轉碼。
解決方案 :

npm install es6-promise -S

兼容到ie9+

在http.js第一行添加

require("es6-promise").polyfill()

fastclick：處理移動端click事件300毫秒延遲。

npm install fastclick -S

之後，在main.js中引入，並綁定到body。

import FastClick from 'fastclick'

FastClick.attach(document.body);

2.引入組件vant

npm安裝vant

npm i vant -S

安裝babel-plugin-import 作用：按需加載插件。只需要引入模塊即可，無需單獨引入樣式

npm i babel-plugin-import -D

在babelrc文件配置plugins

  "plugins": ["transform-vue-jsx", "transform-runtime",
    ["import", [{ "libraryName": "vant", "style": true }]]
  ]

3.vant在頁面中引入和使用使用部分組件

import { Tab, Tabs } from "vant";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },

若多個頁面用到同一個組件，可以在main.js中全局引入

import { Button } from 'vant'
Vue.use(Button)

4.引入axios調用接口

安裝QS

//1.安裝
npm install axios -S

//2.配置axios

//在項目中src下新建api/http.js文件，用以配置axios

import axios from 'axios'
import QS from 'qs'
import {
  Toast
} from 'vant'
// 環境的切換
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/api'
  // axios.defaults.baseURL = 'https://www.development.com'
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = 'https://www.debug.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://www.production.com'
}

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
const TIME_OUT_MS = 60 * 1000 // 默認請求超時時間


/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

修改項目中的個別配置文件

修改config文件夾下的dev.env.js和prod.env.js文件的地址改成需要用到的開發和正式環境的HTTP地址

修改iconfig/ndex.js 解決本地跨域問題

proxyTable: {
      "/api": {
        target: "https://。。。。。。。。",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

在api/port.js文件下寫統一管理的接口

/**
 * api接口統一管理
 */
import { get } from './http'
export function high(params) {
  return get('/highFund/highFundRedesignList', params)
}

5.在頁面中使用axios調用接口：

先引入接口文件：

import { high } from "../api/port";

調用接口：

 methods: {
    getList: function() {
      let _self = this;
      let params = {
        pageIndex: 1,
        code: "01"
      };
      high(params)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }

頁面成功打印出數據

6.設置登陸

@1.由於我這邊的項目登陸和其他頁面調用接口的時候不是同一個域名這時候就需要修改之前所寫的config/index.js 和http.js和port.js文件的代碼重要的是給一個變量來區分不同的域名我這邊是根據是不是登陸來區分的所以給了一個isLogin的變量

a.寫config/index.js 在代理中再添加地址來選擇

proxyTable: {
      "/api": {
        target: "https://。。。。。。b",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      "/bpi": {
        target: "https:。。。。。",
        changeOrigin: true,
        pathRewrite: {
          '^/bpi': ''
        }
      }
    },

b.在http.js文件中給axios的get 和post方法添加是否是登陸頁面的字段來設置axios.baseUrl

//添加一個參數傳入 並且判斷是否有參數  （如果是登陸頁面就傳true 否則的話 不用傳遞isLogin的參數）
//if (isLogin) {
//    axios.defaults.baseURL = '/bpi'
// }

export function get(url, params, isLogin) {
  if (isLogin) {
    axios.defaults.baseURL = '/bpi'
  }
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 * @param {Object} isLogin [是否是登陸頁面是否需要換不同的請求http地址]
 */
export function post(url, params, isLogin) {
  if (isLogin) {
    axios.defaults.baseURL = '/bpi'
  }
  return new Promise((resolve, reject) => {
    axios.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

c.port.js頁面添加登陸的接口和登陸頁面的字段

// 登陸界面
export function login(params) {
  return get('/user/login', params, true)
}

另外一個列表接口還是那樣不變

豆雙

發佈了18 篇原創文章 · 獲贊 3 · 訪問量 1501

私信關注

vue2.0項目搭建步驟（1）

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

移動端遇到大小適配的問題

金額轉換千字符和小數點

element 菜單

常用的公用js

vue2.0項目搭建步驟（1）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結