- 博客(12)
- 资源 (1)
- 收藏
- 关注
原创 Vue开发单页面应用中vue-router和vuex的使用
home页面有2个子路由list和user<template> <div class="home"> <router-view/> <router-link to="/home/list">新闻列表</router-link> <router-link to="/home/user">个人中心...
2019-05-25 21:15:20 817
原创 Vue开发Web阅读器(二)
接下来开发当点击菜单栏中的字体按钮时会弹出字体设置框,且当点击center处时菜单栏和字体设置框都会隐藏显示的方式比较简单,但当点击center处字体设置框隐藏需要用到一个技巧字体设置框中设置一个隐藏自己的方法,当点击center处时父组件Ebook.vue调用子组件字体设置框的隐藏方法this.refs.menuBar.hiddenFontSizeControl()然后开发...
2019-05-13 00:10:16 582
原创 Vue开发Web阅读器(一)
本项目使用vue3初始化项目后需配置vue.config.js,官方文档:https://cli.vuejs.org/zh/config/#vue-config-js我的暂时配置:const path = require('path')function resolve (dir) { return path.join(__dirname, dir)}module.exp...
2019-05-11 14:25:05 4510 1
原创 Vue+Webpack打造todo应用
项目总目录为VUE-SSR-TECHnpm init初始化npm项目,全部设置默认,会生成一个package.json文件npm i webpack vue vue-loader继续安装缺失依赖npm i css-loader
2019-05-08 11:28:37 201
原创 Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册
在pages目录下新建register.vue,点击注册按钮就能跳转至http://localhost:3000/register,因为在user.vue中写过<nuxt-link to="/register" class="register">注册</nuxt-link>但是注册的模板和首页的模板不一样,所以在layouts目录下新建一个空白模板black.vu...
2019-05-07 00:31:07 555 2
原创 Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发
首页header组件开发pages目录下的index.vue组件页面默认引用layouts目录下的default.vue模板,所以我们在default.vue模板中直接使用element模板<template> <el-container> <el-header>Header</el-header> <el-mai...
2019-05-04 20:24:45 708
原创 Vue全家桶+SSR+Koa2全栈开发美团网⑥——实战准备
npx create-nuxt-app <项目名>安装选项因为node的运行环境不支持es6的import from,所以需要babel进行转换,在dev和start下加入--exec babel-node "scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js...
2019-05-03 20:44:44 690
原创 Vue全家桶+SSR+Koa2全栈开发美团网⑤——Nuxt.js基础
安装和启动nuxt.js项目npx create-nuxt-app <项目名>npm run dev在pages目录下创建的vue组件会直接展示在页面上,也就是在创建的v这个ue组件时一起创建了一个aaa的路由假如创建了一个aaa.vue组件,那么访问http://localhost:3000/aaa就能直接访问到这个组件页面示例:创建一个服务端接口来返回数据...
2019-05-02 19:09:40 466
原创 Vue全家桶+SSR+Koa2全栈开发美团网④——redis基础
安装redishttps://www.runoob.com/redis/redis-install.html,安装目录下执行 redis-server即可开启服务在项目目录下安装2个中间件npm i koa-generic-session koa-redis然后在app.js中加载这2个中间件,加密处理和连接redis,key和prefix表示改变用户存储cookies字段名称...
2019-05-02 13:34:08 817
原创 Vue全家桶+SSR+Koa2全栈开发美团网③——mongoose基础
先安装mongoDB,启动数据库然后安装mongoDB可视化数据管理工具Robo 3T还是在koa2项目下安装mongoosenpm i mongoose在koa2根目录下新建一个dbs文件夹,在此文件夹下新建配置文件config.js文件,写入module.exports = { // 在本机的数据库下新建了一个数据库dbs dbs: 'mongodb://127...
2019-05-02 00:00:37 609 1
原创 Vue全家桶+SSR+Koa2全栈开发美团网②——Koa2基础
全局安装koa-generator脚手架npm i -g koa-generator以ejs为模板引擎创建项目koa2 -e porject默认创建的项目以jade为模板引擎koa2 porject然后进入到项目目录,安装依赖cd projectnpm inpm run dev //启动开发模式npm startasync和await基础...
2019-05-01 22:45:52 636
原创 Vue全家桶+SSR+Koa2全栈开发美团网①——Vuex基础
不相关的多个组件想共用一份数据,Vuex可以起到关联作用Status:存储所有组件想要共享的数据,相当于组件中的dataMutations:直接操作status中的数据,即定义如何改变status中的数据Actions:什么时候去改变这个数据,需要actions来触发组件交互触发Actions,Actions提交commit来告诉Mutations在这个时候执行操作,然后改变s...
2019-05-01 15:59:57 709
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人