2. 程式人生 > 實用技巧 >前端專案搭建準備流程

前端專案搭建準備流程

阿新 • • 發佈：2020-08-03

目錄

前端專案搭建準備流程

1. 客戶端專案搭建

1.1 建立專案目錄

cd 專案目錄[荏苒資訊]
vue init webpack renran

例如，我要把專案儲存在桌面下的子目錄renran ~/Desktop/renran，可以如下操作：

cd Desktop/renran
vue init webpack renran_pc

開啟專案已經，在pycharm的終端下執行vue專案，檢視效果。

上面的操作步驟，等同於執行了下面這句命令。

npm run dev

接下來，我們根據終端上效果顯示的對應地址來訪問專案(如果有多個vue專案在執行，8080埠被佔據了，伺服器會自動改埠，所以根據自己實際在操作中看到的地址來訪問。)

訪問：http://localost:8080

1.2 初始化專案

清除預設的HelloWorld.vue元件和APP.vue中的預設模板程式碼和預設css樣式

<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

接下來，我們可以檢視效果了，一張白紙~

1.3 安裝路由vue-router

官方文件：https://router.vuejs.org/zh/

1.3.1 下載安裝路由元件

npm i vue-router -S
# npm install vue-router --save

1.3.2 配置路由

1.3.2.1 初始化路由物件

在src目錄下建立router路由目錄，在router目錄下建立index.js路由檔案

index.js路由檔案中，編寫初始化路由物件的程式碼 .

// 1. 引入vue和vue-router元件核心物件，並在vue中通過use註冊vue-router元件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router物件，並在vue-router裡面編寫路由，提供給main.js呼叫

// 匯入元件
// import 元件名 from "../components/元件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由地址的顯示模式： 預設hash，表示位址列上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應元件的name值，將來用於跳轉頁面]",
    //   path: "訪問url路徑",
    //   component: 元件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user",
      component: User
    },
  ],
});

// vue-router除了可以進行元件和url地址的繫結以外，還可以
// 進行不同元件的頁面跳轉，

1.3.2.2 註冊路由資訊

開啟main.js檔案，把router路由規則物件註冊到vue中，程式碼：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

1.3.2.3 在檢視中顯示路由對應的內容

在App.vue元件中，新增顯示路由對應的內容。程式碼：

<template>
  <div id="app">
    <!-- 標籤名必須是這個rouer-view -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

注意：如果在vue建立專案的時候，設定安裝vue-router，則專案會自動幫我們生成上面的router目錄和index.js裡面的程式碼，以及自動到main.js裡面註冊路由物件。

1.3.3 路由物件提供的操作

在我們安裝註冊了vue-router元件以後，vue-router在vue專案中會幫我們在全域性範圍內所有元件裡面建立2個物件給我們使用：

  1. this.$router，可用於在js程式碼中進行頁面跳轉。
  2. this.$route，可用於獲取位址列裡的url的引數(query與params)。

1.3.3.1 頁面跳轉(站內)

在vue-router提供的操作中， 進行頁面跳轉有2種方式：

  1. 使用<router-link to="url地址">來跳轉

  2. 在<script>中使用this.$router.push(url地址)來跳轉

    在<script>中還可以使用this.$router.go(整數)，表示跳轉返回上一頁或者上幾頁，下一個或者下幾頁

1.3.3.1.1 router-link標籤跳轉

例如，我們就可以在Home.vue元件中，使用router-link跳轉到User.vue元件中。

routes/index.js程式碼：

// 1. 引入vue和vue-router元件核心物件，並在vue中通過use註冊vue-router元件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router物件，並在vue-router裡面編寫路由，提供給main.js呼叫

// 匯入元件
// import 元件名 from "../components/元件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由地址的顯示模式： 預設hash，表示位址列上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應元件的name值，將來用於跳轉頁面]",
    //   path: "訪問url路徑",
    //   component: 元件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user",
      component: User
    },
  ],
});

// vue-router除了可以進行元件和url地址的繫結以外，還可以
// 進行不同元件的頁面跳轉，

Home.vue程式碼：

<template>
    <div>
      首頁頁面元件
      <a href="/user">個人中心</a>
      <!-- router-link標籤，本質上就是a標籤，只是由vue-router進行加工處理
      可以顯示區域性頁面重新整理，不會重新載入內容，進行ajax跳轉
       -->
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>

1.3.3.1.2 this.$router.push()跳轉
<template>
    <div>
      首頁頁面元件
      <a href="/user">個人中心</a>
      <!-- router-link標籤，本質上就是a標籤，只是由vue-router進行加工處理
      可以顯示區域性頁面重新整理，不會重新載入內容，進行ajax跳轉
       -->
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行許可權，登入之類的判斷，然後再進行跳轉
                // this.$router.back(); // 返回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 返回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href
                // 注意,this.$router.push() 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議"
          }
        }
    }
</script>

<style scoped>

</style>

1.3.3.2 引數傳遞

vue-router提供了this.$route，可以讓我們接收來自其他頁面的附帶引數。引數有2種：

  1. 查詢字串(query string)，就是位址列上面?號後面的引數，

    例如：http://localhost:8008/user?name=xiaoming&pwd=123，這裡name=xiaoming&pwd=123就是查詢字串引數。

  2. 路由引數(router params)，就是位址列上面路由路徑的一部分，

    例如：http://localhost:8080/user/300/xiaoming，此時，300屬於路由路徑的一部分，這個300就是路由引數.，當然，xiaoming,或者user也可以理解是路由引數，就是看我們的頁面中是否需要接收而已。

1.3.3.2.1 獲取查詢字串
  1. 必須先有一個頁面跳轉發送引數。例如，在Home元件中跳轉到User元件中，需要傳遞name和pwd查詢字串。

Home.vue程式碼：

<template>
    <div>
      首頁頁面元件
<!--      <a href="/user">個人中心</a>
      &lt;!&ndash; router-link標籤，本質上就是a標籤，只是由vue-router進行加工處理
      可以顯示區域性頁面重新整理，不會重新載入內容，進行ajax跳轉
       &ndash;&gt;
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>-->

      <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字串引數</router-link>
      <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字串引數</router-link>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行許可權，登入之類的判斷，然後再進行跳轉
                // this.$router.back(); // 返回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 返回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href
                // 注意,this.$router.push 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議"
          }
        }
    }
</script>

<style scoped>

</style>
  1. 可以下一個頁面中，這裡代表的就是User元件，接收來自Home元件的引數。
<template>
    <div>
      使用者中心頁面元件
    </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            // 接收位址列上面的引數
            // this.$route是vue-router提供的一個用於接收地址引數的物件。
            // 經過main.js裡面註冊router物件以後，
            // 將來在所有的子元件中，可以通過this.$route來獲取引數或者通過this.$router跳轉頁面
            // 查詢字串引數
            // query是this.$route裡面的一個數組，this.$route會自動收集位址列上所有的引數儲存到query裡面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``裡面，${}圈住的內容會被js當成變數來解析
        }
    }
</script>

<style scoped>

</style>
1.3.3.2.2 獲取路由引數

例如：我們使用者的介面都是一樣的，但是每一個使用者來到自己的頁面中，顯示的內容肯定都是不一樣的，此時，我們需要使用不同的路徑來區分不同的使用者。這時候，可以在路由路徑中使用路由引數表示不同使用者的id

例如：我們就需要設定一個route/index.js中路由資訊裡面，哪一段路由屬於路由引數。

src/routes/index.js設定路由引數。

// 1. 引入vue和vue-router元件核心物件，並在vue中通過use註冊vue-router元件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router物件，並在vue-router裡面編寫路由，提供給main.js呼叫

// 匯入元件
// import 元件名 from "../components/元件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由地址的顯示模式： 預設hash，表示位址列上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應元件的name值，將來用於跳轉頁面]",
    //   path: "訪問url路徑",
    //   component: 元件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user/:id/img-:img_id",
      component: User
    },
  ],
});

// vue-router除了可以進行元件和url地址的繫結以外，還可以
// 進行不同元件的頁面跳轉，

然後我們就是在Home中如果需要轉到User裡面。

Home.vue程式碼：

<template>
    <div>
      首頁頁面元件
<!--      <a href="/user">個人中心</a>
      &lt;!&ndash; router-link標籤，本質上就是a標籤，只是由vue-router進行加工處理
      可以顯示區域性頁面重新整理，不會重新載入內容，進行ajax跳轉
       &ndash;&gt;
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>-->

<!--      <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字串引數</router-link>-->
<!--      <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字串引數</router-link>-->
      <router-link to="/user/100/img-10086">路由引數</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行許可權，登入之類的判斷，然後再進行跳轉
                // this.$router.back(); // 返回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 返回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href
                // 注意,this.$router.push 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議"
          }
        }
    }
</script>

<style scoped>

</style>

User.vue，元件中可以通過this.$route.params接收路由引數。

<template>
    <div>
      使用者中心頁面元件
    </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            // 接收位址列上面的引數
            // this.$route是vue-router提供的一個用於接收地址引數的物件。
            // 經過main.js裡面註冊router物件以後，
            // 將來在所有的子元件中，可以通過this.$route來獲取引數或者通過this.$router跳轉頁面

            // 查詢字串引數
            // query是this.$route裡面的一個數組，this.$route會自動收集位址列上所有的引數儲存到query裡面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``裡面，${}圈住的內容會被js當成變數來解析

            // 路由引數
            // params是this.$route裡面的一個數組，this.$route會自動收集路由列表中已經標記為路由引數所有內容儲存到params中
            let id = this.$route.params.id;
            console.log(id);
            let img_id = this.$route.params.img_id;
            console.log(`img_id = ${img_id}`);
        }
    }
</script>

<style scoped>

</style>

2. ElementUI

對於前端頁面佈局，我們可以使用一些開源的UI框架來配合開發，常用的UI框: bootstrap，H-ui框架，lay-UI框架，Amaze UI，zui框架，ElementUI.

Vue開發前端專案中，比較常用的就是ElementUI了。

ElementUI是餓了麼團隊開發的一個UI元件框架，這個框架提前幫我們提供了很多已經寫好的通用模組，我們可以在Vue專案中引入來使用，這個框架的使用類似於我們前面學習的bootstrap框架，也就是說，我們完全可以把官方文件中的元件程式碼拿來就用，有定製性的內容，可以直接通過樣式進行覆蓋修改就可以了。

中文官網：http://element-cn.eleme.io/#/zh-CN

文件快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart

2.1 快速安裝ElementUI

專案根目錄執行以下命令:

npm i element-ui -S

上面的命令等同於 npm install element-ui --save

執行命令效果：

2.2 配置ElementUI到專案中

在main.js中匯入ElementUI，並呼叫。程式碼：

// elementUI 匯入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 呼叫外掛
Vue.use(ElementUI);

成功引入了ElementUI以後，接下來我們就可以開始進入前端頁面開發，首先是首頁。

2.3 注意點

:key="key"
elementUI的元件中宣告v-for時，需要給元件傳遞key屬性

3. 首頁

首頁採用了上下頁面佈局，首頁是導航欄、輪播圖。。。腳部等幾個小模組。所以我們可以把首頁作為一個元件進行開發，然後把首頁的這些小模組作為單獨的元件來進行開發。

3.1 建立首頁元件

在src/components目錄下建立檔案 Home.vue

程式碼：

<template>
  <div id="home">
    首頁
  </div>
</template>

<script>
export default {
  name:"Home",
  data(){
    return {

    }
  }
}
</script>

<style scoped>

</style>

3.1.1 建立首頁對應的路由

在router/index.js中引入Home元件，並設定Home元件作為首頁路由。

程式碼：

import Vue from "vue"
import Router from "vue-router"

// 後面這裡引入可以被使用者訪問的頁面元件
import Home from "../components/Home"

Vue.use(Router);

export default new Router({
  // 路由跳轉模式，注意使用 history
  mode: "history",

  // 路由規則
  routes:[
    {
      // name:"路由別名",
      name:"Home",
      // path: "路由地址",
      path: "/",
      // component: 元件類名,
      component: Home,
    },
  ]
})

練習：

把elementUI和vue-router安裝到vue裡面，並對於todolist和商品管理的功能，按鈕，輸入框，刪除提示進行UI美化，使用ElementUI提供的樣式和特效進行加工。
要求：
   1. todolist和商品管理是2個獨立的頁面元件，有屬於自己的url地址，相互之間可以通過按鈕進行頁面跳轉.
   2. 每一個頁面元件至少加入3個以上的ElementUI的效果。

相關推薦

前端專案搭建準備流程

目錄前端專案搭建準備流程1. 客戶端專案搭建1.1 建立專案目錄1.2 初始化專案1.3 安裝路由vue-router1.3.1 下載安裝路由元件1.3.2 配置路由1.3.2.1 初始化路由物件1.3.2.2 註冊路由資訊1.3.2.3 在檢視中顯示路由對應的

Vue (學習第四部 前端專案搭建流程 )

目錄 客戶端專案搭建 　　建立專案目錄 　　初始化專案 　　安裝路由 Vue-router

前端專案搭建部署全流程（四）：腳手架與業務模組構建

技術標籤：前端javascriptvue.jsgitvue 1.前言 繼上一篇文章之後一個簡單的React專案模板已經搭建好了，這篇文章主要寫一下簡易腳手架以及業務模組的生成命令列，以往我們使用較多的是vue-cli、create-react-app

部落格前端專案搭建(2) 頁面路由編寫+登入頁面編寫

部落格前端專案搭建(2) 頁面路由編寫+登入頁面編寫 我們在views資料夾下定義幾個頁面：

狂神說Java【SMBMS】——SMBMS超市訂單管理系統(一) ——專案搭建準備工作

  1.專案架構 2.資料庫設計 3.專案搭建 1、專案如何搭建？ 是否使用maven？ 使用maven要去網上找依賴

java中ssj框架的專案搭建流程

1.新建一個maven專案 2.在pom.xml中，配置所需的jar包及其版本號 <!-- 設定自定義屬性和值 -->

用vue框架搭建前端專案

建立vue專案(已經安裝了nodejs,vue@cli) vue create vuedemo 注意: 在選擇vue的版本時,選擇vue2.

手把手教你用SonarQube+Jenkins搭建--前端專案--程式碼質量管理平臺 (Window系統)

前言 網上教程大多介紹的是Linux系統下SonarQube+Jenkins如何使用，這是因為這兩款軟體一般都是部署在伺服器上，而大多數伺服器，採用的都是Linux系統。大多數伺服器用Linux的原因是：

vue3.0 專案搭建和使用流程

最近在重構一個老專案，領導要求使用新的技術www.cppcns.com棧。好吧，是時候秀一波我新學的vue3.0了。

Springboot專案搭建（前端到資料庫，超詳細）

下面詳細談談我的第一個springboot專案搭建，希望會給還在摸索的同學一點幫助。

【Node.js】一個很水的node專案搭建流程

一、Node.js和npm node.js不是一門語言，而是一個平臺。 npm是node.js這個平臺的包管理器，下載了node.js後，npm會自動一起下載下來。

java開發之Springboot專案搭建（前端到資料庫，超詳細）

java開發之Springboot專案搭建（前端到資料庫，超詳細） java開發之Springboot專案搭建（前端到資料庫，超詳細）

前端部落格專案搭建(4) 部落格編輯發表頁面 以及最終收尾

前端部落格專案搭建(4)部落格編輯發表頁面 以及最終收尾 安裝mavon-editor 基於Vue的markdown編輯器mavon-editor

說說真實Java專案的開發流程，以及面試前的專案準備說辭

    介紹專案是必不可少的Java面試環節，求職者需要藉此證明自己真實Java專案的經驗，如果再做的好的話，需要藉此展開自己的亮點說辭。

SpringBoot多模組專案搭建（一）

1. 新建maven專案 1.1 File -> new -> project ->maven 1.2 設定groupId和artifactId 1.3 設定專案名

SpringBoot後臺許可權管理系統（二)—前端工程搭建

SpringBoot 後臺許可權框架搭建（一）—後臺框架搭建 SpringBoot後臺許可權管理系統（二)—前端工程搭建

Vue前端專案部署IIS的實現

背景：最近用vue寫了個demo(不涉及呼叫後臺資料)，為了給銷售團隊更好的給客戶講述產品的一些特點及大體的感官認識。需要將自己做的專案安裝到他們的筆記本上面去，作為一個銷售人員來說，他不會知道例如vue中的npm

記一次react前端專案打包優化的方法

前文 之前一年多前接手的一個react專案，前段時間因為做業務中臺專案，對公司現有的應用專案做中臺化改造，這期間將專案部署到uat環境，測試期間，測試小妹妹和產品大叔都吐槽進入uat專案的時候要load很久，白屏時間

Go語言框架Beego專案搭建的方法步驟

1，命令列檢視 Go 開發包的環境變數配置資訊 命令列說明如下： 第 1 行，執行 go env 指令，將輸出當前 Go 開發包的環境變數狀態。

前後端分離，如何在前端專案中動態插入後端API基地址？（in docker）

開門見山，本文分享前後端分離，容器化前端專案時動態插入後端API基地址，這是一個很讚的實踐，解決了前端專案容器化過程中受制後端呼叫的尷尬。