前端项目
前端项目
笔记
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,
},
]
})
