四: 使用vue搭建網站前端頁面

時間 2020-07-07

標籤使用 vue 搭建網站前端頁面欄目網站開發简体版

原文原文鏈接

---恢復內容開始---css

在搭建路由項目的時候的基本步驟html

一:建立項目前端

　　安裝好vue 搭好環境 (步驟在上篇博客中)vue

　　進入項目目錄 cd 目錄路徑/ 目錄名node

　　建立項目　vue init webpack 項目名webpack

　　效果:git

　　項目文件結構:及做用web

-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄
　　|--assets                         //裏面放屬於該項目的資源文件。存放其餘組件的資源文件會被webpack編譯,致使報錯 
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           //  絕對路徑靜態文件 任何放在在static/的文件都使用絕對的URL /static/[filename]來引用
|   |-- data                           // 羣聊分析獲得的數據用於數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

二: 啓動項目vue-router

　　1 進入項目目錄: cd 項目名vuex

　　2 啓動項目: npm run dev

　　效果:

　　3 而後初始化組件

三: 安裝配置路由

　　1 安裝 : npm install vue-router

　　 2 配置路由:

　　　　如圖建立若有目錄

　　 3 在index.js路由文件中編寫初始化路由對象的代碼

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

// 這裏導入可讓讓用戶訪問的組件

Vue.use(Router);

export default new Router({
  // 設置路由模式爲‘history’，去掉默認的#
  mode: "history",
  routes:[
    // 路由列表

  ]
})

index.js

　　 4 註冊路由信息

　　　　打開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 './routers/index';

Vue.config.productionTip = false

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

main.js

　　 5 在視圖中顯示路由對應的內容

　　　　在App.vue組件中,添加顯示路由對應的內容

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

  }
}
</script>

<style>

</style>

App.vue

四: 引入ElementUl 框架

對於前端頁面佈局，咱們可使用一些開源的UI框架來配合開發，Vue開發前端項目中，比較經常使用的就是ElementUI了。
ElementUI是餓了麼團隊開發的一個UI組件框架，這個框架提早幫咱們提供了不少已經寫好的通用模塊，咱們能夠在Vue項目中引入來使用，這個框架的使用相似於咱們前面學習的bootstrap框架，也就是說，咱們徹底能夠把官方文檔中的組件代碼拿來就用，有定製性的內容，能夠直接經過樣式進行覆蓋修改就能夠了。

ElementUI框架的描述

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

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

　　1 快速安裝ElementUI

　　　　安裝指令:npm i element-ui -S 或 npm install element-ui --save

　　2 在main.js中導入ElementUI,

// 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 './routers/index';
//element-ui的導入
import ElementUI from  'element-ui'
import  'element-ui/lib/theme-chalk/index.css';
vue.use(ElementUI);
Vue.config.productionTip = false


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

main.js

五: 開發頁面

　(一): 首頁

　　1 建立首頁組件

<template>

</template>

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

      };
    }
  }
</script>

<style scoped>

</style>

首頁組件

　　2 建立首頁對應的路由

　　　在routes/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:[
    // 路由列表
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/home",
      name: "Home",
      component:Home,
    }
  ]
})

index.js

　　　效果

　　3 開發子導航組件

　　在其餘頁面都存在相同的導航,爲避免重複代碼,需建立一個單獨的組件

　　4 在首頁Home.vue導入導航插件,代碼以下:　

<template>
  <div class="home">
    <Header/>
  </div>
</template>

<script>
  import Header from "./common/Header"
  export default {
    name: "Home",
    data(){
      return {

      };
    },
    components:{
      Header,
    }
  }
</script>

<style scoped>

</style>