---恢復內容開始---
在搭建路由項目的時候的基本步驟
一:創建項目
安裝好vue 搭好環境 (步驟在上篇博客中)
進入項目目錄 cd 目錄路徑/ 目錄名
創建項目 vue init webpack 項目名
效果:
項目文件結構:及作用
-- 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 // 項目基本信息
二: 啟動項目
1 進入項目目錄: cd 項目名
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:[ // 路由列表 ] })
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/>' });
5 在視圖中顯示路由對應的內容
在App.vue組件中,添加顯示路由對應的內容
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
四: 引入ElementUl 框架
對於前端頁面布局，我們可以使用一些開源的UI框架來配合開發，Vue開發前端項目中，比較常用的就是ElementUI了。
ElementUI是餓了么團隊開發的一個UI組件框架，這個框架提前幫我們提供了很多已經寫好的通用模塊，我們可以在Vue項目中引入來使用，這個框架的使用類似於我們前面學習的bootstrap框架，也就是說，我們完全可以把官方文檔中的組件代碼拿來就用，有定制性的內容，可以直接通過樣式進行覆蓋修改就可以了。
中文官網：http://element-cn.eleme.io/#/zh-CN
文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart
1 快速安裝ElementUI
安裝指令:npm i element-ui -S 或
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/>' });
五: 開發頁面
(一): 首頁
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,
}
]
})
效果
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>
---恢復內容結束---