1. 程式人生 > >Vue-cli腳手架搭建專案

Vue-cli腳手架搭建專案

1、命令列操作(須有node和webpack)

    a)cnpm install [email protected] -g       全域性安裝(只需要安裝一次即可)
    b)vue init webpack myapp   初始化專案
    c)cd myapp  進入到myapp資料夾目錄下
    d)cnpm install   安裝載入模組
    e)cnpm run dev 檢視伺服器是否成功建立
    f)cnpm install node-sass sass-loader -D  安裝sass模組
    npm也可以,由於下載伺服器是國外的,所以更換成淘寶映象,下載速度更快。(nrm ls 檢視映象,nrm use taobao  即可)
  ![修改淘寶映象](https://img-blog.csdnimg.cn/20181108174543997.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjM0OTgy,size_16,color_FFFFFF,t_70)

2、操作加截圖

   命令列操作如圖:(一路enter,最後一步選擇no,不自動執行npm install )
   ![命令列操作](https://img-blog.csdnimg.cn/20181108175108163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjM0OTgy,size_16,color_FFFFFF,t_70)
   按順序執行命令列操作c、d、e即可。(d操作過程可能需要3-4分鐘,視網速而定,請耐心等待)

3、伺服器代理

 找到 如下目錄檔案  myapp / config / index.js 中的proxyTable按照下面要求更改程式碼塊即可
 (每更改一次配置檔案都需要重新啟動伺服器,更改後的程式碼才能生效)
    proxyTable: { // 配置伺服器代理,解決一些跨域的問題
      '/zhangyueyue': { // 自己 設定  name
        target: 'https://www.daxunxun.com/',  //只寫想要跨域的協議和域名
        changeOrigin: true,
        pathRewrite: {
          '^/zhangyueyue': ''  //和上邊設定的 name一致
        }
      }
    }

傳送請求程式碼塊如下:

fetch('/zhangyueyue/douban')
      .then(res => res.json())
      .then(data => {
        this.prolist = data
        console.log(data)
 })

4、關閉eslint

	找到 build / webpack.base.conf.js 檔案
	將43行程式碼註釋掉即可

在這裡插入圖片描述