vue-cli腳手架

案例一：

案例二：

一、腳手架簡介

Vue腳手架是Vue官方提供的標準化開發(fā)工具（開發(fā)平臺），它提供命令行和UI界面，方便創(chuàng)建vue工程、配置第三方依賴、編譯vue工程

1. webpack

前端項目工程化的標志之一就是引入了『編譯』環(huán)節(jié)，而 webpack 就是最常見、最常用的前端項目編譯工具。

如果作類比的話，那么 npm + webpack ≈ maven

2、腳手架介紹

a、安裝vue-cli4

• 刪除已安裝的 vue-cli

npm uninstall -g @vue/cli

• 先安裝淘寶鏡

npm config set registry https://registry.npm.taobao.org

安裝cli

npm install -g @vue/cli

安裝結(jié)束后，你可以通過 vue --version 或 vue -V 查看 vue-cli 的版本信息

b、配置vue環(huán)境變量

把這個路徑配到path里

3、創(chuàng)建vue-cli4項目

3.1、第一步

使用如下命令開始創(chuàng)建 vue 項目

vue create 項目名

你會看到如下內(nèi)容：

• 第一項和第二項（ default ...）表示的是使用默認配置創(chuàng)建 vue 項目。

• 第三項（ Manually ...）表示手動對 vue 項目的各方面進行設(shè)置

3.2、第二步

在上一步選中第二項后，你會看到如下界面：

對于每一項的功能，此處做個簡單描述：

Babel：支持使用 babel 做轉(zhuǎn)義。
TypeScript：支持使用 TypeScript 書寫源碼。
Progressive Web App (PWA) Support PWA：支持。
Router：支持 vue-router。
Vuex：支持 vuex。
CSS Pre-processors：支持 CSS 預處理器。
Linter / Formatter：支持代碼風格檢查和格式化。
Unit Testing：支持單元測試。
E2E Testing： 支持 E2E 測試。

3.3、第三步

選擇vue版本為2，不要選3，不要選3

3.4、第四步

如果在功能選擇界面中選中了 Router，那么我們接下來會看到如下界面（如果功能界面沒有選擇 Router，就會跳過這個界面）：

在這個界面中，vue-cli 在詢問你，對于 Router 你是否以它的 history 模式使用它？默認值是 Yes 。

如果不使用 Router 的 history 模式，那自然就是 hash 模式。這里我們輸入 n，表示使用 Router 的 hash 模式。

3.5、第五步

在設(shè)置完你所要使用的各個功能的設(shè)置之后（例如，上面的 Router 的 history / hash 模式的設(shè)置）， 我們會看到下面界面：

在這個界面中，vue-cli 是在詢問你：是將所有的配置都放在 pacakge.json 一個文件中，還是將各個功能的配置分開存放在獨立的文件中？

選擇第一項：分開存放。

3.6、第六步

這是 vue-cli 創(chuàng)建 vue 項目的最后一個界面：

在這里，vue-cli 是在詢問你：是否將你的這些設(shè)置保留下來作為默認的項目設(shè)置的模板。默認值是 N 。

我們輸入 N ，或者直接按回車確認進入安裝界面：

3.7、第七步

在控制臺中輸入：npm run serve 啟動項目

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

1、項目結(jié)構(gòu)

項目目錄說明：

2、src目錄說明

• assets 靜態(tài)資源 (css、 js 、 image 、字體圖標)

• views 放置組件頁面

• components 放置組件頁面中嵌套的組件

• App.vue 根組件 => 指定路由出口

  • 腳手架之后,所有的組件都將渲染到 app.vue 中

• app 中的 #app 還是 index.html 中的 #app, app.vue 中的會覆蓋前者，可以通過分別添加 title 屬性驗證一下

• 路由出口要寫在 app.vue 組件模板中

• main.js

  • 入口 js 文件

  • 作用 : 創(chuàng)建 vue 實例,導入其他組件并掛在到 vue 實例上

  • Vue.config.productionTip = false 不要打印提示

  • 檢測 no new : 見后面的檢測警告

    new Vue({
      el: '#app', // 目標顯示
      router,   // 掛載路由
      components: { App }, // 注冊組件 App
      template: '<App/>' // 模板顯示組件 app
    })
    

3、單文件組件

在 vue-cli 創(chuàng)建的 vue 項目中，我們看到有一類后綴名為 .vue 的文件，我們稱為『單文件組件』。

單文件組件的組成結(jié)構(gòu)分三部分：

• template 組件的模板區(qū)域
• script 業(yè)務邏輯區(qū)域
• style 樣式區(qū)域

例如：

<template>
  <!-- 這里用于定義 Vue 組件的模板內(nèi)容 -->
</template>

<script>
  // 這里用于定義 Vue 組件的業(yè)務邏輯
  export default {
    data(){
    	return { // 私有數(shù)據(jù)
    	
    	} 
    }, 
    methods: {
    
    } // 處理函數(shù)
    ,created(){
    
    }
}
</script>

<style scoped>
  /* 這里用于定義組件的樣式 */
</style>

4、vue.config.js 文件

默認情況下通過 serve 命令運行項目會占用 8080 端口，在 vue.config.js 的文件加入如下配置修改端口號：

module.exports = {
  devServer: {
    port: 8888
  }
}

四、安裝axios包

1、安裝axios

安裝方式

使用 npm 命令安裝
npm install axios

2、vue-cli 中main.js引入并使用 axios

import axios from 'axios'
Vue.prototype.$axios = axios

五、VUE-CLI解決跨域問題

vue-cli 解決開發(fā)過程中的跨域問題是利用到了 webpack 在開發(fā)環(huán)境中所提供的代理服務器（http-proxy-middleware）。

前端的 ajax 請求并不是直接發(fā)給后臺服務器，而是發(fā)給了代理服務器，再由代理服務器轉(zhuǎn)發(fā)給后臺服務器；返回數(shù)據(jù)的時候，同樣也是由代理服務器接收到后臺服務器的返回，然后代理服務器再將返回結(jié)果轉(zhuǎn)發(fā)給前端。

在vue-cli項目的根目錄vue.config.js，添加如下代碼

module.exports = {
    transpileDependencies: true,
    devServer: {
    port: 8888,  //vue項目訪問端口
      proxy: {
        "/api": { // 1
          target: 'http://127.0.0.1:8080',   // 2
          changeOrigin: true, // 3
          pathRewrite: {
            '^/api': '/' // 4
          }
        }
      }
    }
  }

• 配置說明
  1、所有以 /api 開頭的請求都要求代理服務器進行轉(zhuǎn)發(fā)。
  2、要求代理服務器（vue 的 http-proxy-middleware）將我們發(fā)給它的請求轉(zhuǎn)發(fā)到 xxx 地址，即，真實的后臺服務器的根路徑。這里需要注意的一點是，這里必須加上 http:// 前綴。
  3、是否是跨域請求？這基本上肯定是廢話，不跨域就沒有必要配置這個 proxy 了。
  4、代理服務器轉(zhuǎn)發(fā)時是否需要改寫 URI，以及如何改寫。

總結(jié) 

到此這篇關(guān)于Vue腳手架創(chuàng)建的文章就介紹到這了,更多相關(guān)Vue腳手架創(chuàng)建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論