前端項目
筆記
js中的本地存儲
本地存儲與vue無關，是原生js里面的內容。主要作用是方便我們臨時或者永久得在本地客戶端中保存數據使用。
html5提供給開發者保存數據到客戶端的兩個新對象.
window.localStorage # 本地存儲, 永久存儲數據到客戶端中
window.sessionStorage # 會話存儲, 臨時存儲數據到客戶端中,在用一個會話期保存數據
這兩個對象都是保存數據的，只是保存數據的周期不一樣而已。
這兩個對象的用法也是一樣的。
localStorage.變量名 = 變量值 # 存儲數據
localStorage.setItem("變量名","變量值"); # 存儲數據
localStorage.變量名 # 獲取數據
localStorage.getItem("變量名"); # 獲取數據
localStorage.removeItem("變量名"); # 刪除數據
localStorage.clear(); # 清空本地存儲中的所有數據
本地存儲的作用： 減少請求服務端的次數，減輕服務器的存儲壓力，
2. 項目搭建
2.1 創建項目目錄
cd 項目目錄
vue init webpack renran
例如，我要把項目保存在桌面下 ~/Desktop/renran，可以如下操作：
cd Desktop/renran
vue init webpack renran_pc
效果：
根據需要在生成項目時，我們選擇對應的選項。
根據上面的提示，我們已經把vue項目構建好了，接下來我們可以在pycharm編輯器中把項目打開並根據上面黃色提示，運行測試服務器。
打開項目已經，在pycharm的終端下運行vue項目，查看效果。
npm run dev
接下來，我們根據終端上效果顯示的對應地址來訪問項目(如果有多個vue項目在運行，8080端口被占據了，服務器會自動改端口，所以根據自己實際在操作中看到的地址來訪問。)
2.2 初始化項目
清除默認的HelloWorld.vue組件和APP.vue中的默認模板代碼和默認樣式
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
修改后效果：
接下來，我們可以查看效果了，一張白紙~
2.3 安裝路由vue-router
2.3.1 下載路由組件
npm i vue-router -S
執行效果：
2.3.2 配置路由
2.3.2.1 初始化路由對象
在src目錄下創建router路由目錄，在router目錄下創建index.js路由文件
效果：
index.js路由文件中，編寫初始化路由對象的代碼 .
import Vue from "vue"
import Router from "vue-router"
// 這里導入可以讓讓用戶訪問的組件
Vue.use(Router);
export default new Router({
// 設置路由模式為‘history’，去掉默認的#
mode: "history",
routes:[
// 路由列表
]
})
2.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/>'
});
2.3.2.3 在視圖中顯示路由對應的內容
在App.vue組件中，添加顯示路由對應的內容。
代碼：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
注意：如果在vue創建項目的時候，設置安裝vue-router，則項目會自動幫我們生成上面的router目錄和index.js里面的代碼，以及自動到main.js里面注冊路由對象。
3. 引入ElementUI
對於前端頁面布局，我們可以使用一些開源的UI框架來配合開發，Vue開發前端項目中，比較常用的就是ElementUI了。
ElementUI是餓了么團隊開發的一個UI組件框架，這個框架提前幫我們提供了很多已經寫好的通用模塊，我們可以在Vue項目中引入來使用，這個框架的使用類似於我們前面學習的bootstrap框架，也就是說，我們完全可以把官方文檔中的組件代碼拿來就用，有定制性的內容，可以直接通過樣式進行覆蓋修改就可以了。
中文官網：http://element-cn.eleme.io/#/zh-CN
文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart
3.1 快速安裝ElementUI
項目根目錄執行以下命令:
npm i element-ui -S
上面的命令等同於 npm install element-ui --save
執行命令效果：
3.2 配置ElementUI到項目中
在main.js中導入ElementUI，並調用。代碼：
// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);
效果：
成功引入了ElementUI以后，接下來我們就可以開始進入前端頁面開發，首先是首頁。
4. 首頁
首頁采用了上下頁面布局，首頁是導航欄、輪播圖。。。腳部等幾個小模塊。所以我們可以把首頁作為一個組件進行開發，然后把首頁的這些小模塊作為單獨的組件來進行開發。
4.1 創建首頁組件
在src/components目錄下創建文件 Home.vue
代碼：
<template>
<div id="home">
首頁
</div>
</template>
<script>
export default {
name:"Home",
data(){
return {
}
}
}
</script>
<style scoped>
</style>
4.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,
},
]
})