使用 Element UI 和 Leancloud 的 Vue.js 项目开发(三) - 首页初步设计
项目演示地址：https://hujiyi.github.io/acme-world-web/ 首页初步设计对于一个论坛网站来说，用户登录、进入后台管理界面后发表话题， 首页才有内容可以显示。但是为了不让首页太难看、同时提供到过其他视图的跳转，需要先对首页进行一些简单的设计。 修改首页的 template打开 src/views/home/Index.vue ， 编辑其内容如以下代码： 123456789101112131415161718192021222324<template> <el-container> <el-header> <div class="logo">Acme World APP</div> <router-link to="/dashboard"> <el-button...
在 Butterfly 主题的页脚养鱼
准备工作首先必须引入需要的 jquery 文件，网址为 https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js 再引入必要的鱼儿游动的 js 文件，网址为: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js 将以上两个文件下载并保存到 Hexo 博客项目的 themes/butterfly/source/js/ 文件夹中。 打开 themes/butterfly/source/js/fishes.js 文件，找到以下代码: 123$("body").append( '<script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>'), 将 https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js 文件下载并保存到...
使用 Element UI 和 Leancloud 的 Vue.js 项目开发(二) - 路由规划
项目演示地址：https://hujiyi.github.io/acme-world-web/ 路由规划与实现本项目实现的是一个论坛网站，网站划分为三个部分: 前台用户界面：主要是论坛的主题；主题的详细内容及评论； 帐号管理界面：主要是注册、登录等功能； 后台管理界面：主要是主题的管理；评论内容的管理等功能； 创建对应的文件夹及文件分别创建以下三个文件夹： src/views/home：用于存放前台用户界面的文件 ； src/views/account：存放用户帐号相关的文件； src/views/dashboard：存放后台管理界面的文件； 分别在以上三个文件夹各添加一个 Index.vue 文件，用于该模块的页面布局。 删除原有的两个视图文件： src/views/About.vue 和 src/views/Home.vue; 创建和删除完毕后的项目 views 文件夹下的文件结构如下图所示： 1234567└-- views |-- account | └-- Index.vue |-- dashboard | ...
使用 Element UI 和 Leancloud 的 Vue.js 项目开发(一) - 创建项目
项目演示地址：https://hujiyi.github.io/acme-world-web/ 前提条件在创建项目前需要先安装下列应用程序 node.js yarn (可选) @vue/cli Visual Studio Code (包含安装相应的扩展) Git (可选) 创建项目包管理工具 npm 和 yarn npm 和 yarn 都是包管理工具， npm 是node.js自带的，yarn 需要额外安装。在使用一段时间之后，我现在比较喜欢使用 yarn, 至于优点，网上列出来的主要有这么几个：速度快、安装版本统一、输出信息更简洁等等。 所以在下面的操作过程中，基本上就按照自己的习惯使用yarn 来完成，如果自己不习惯这个命令的话，也可以自行使用相应的 npm 命令来操作。只要得到的结果一样就可以了。 Vue.js 2.x 和 Vue.js 3.x 的选择 Vue.js 3.x 的正式版发布已经有一段时间了，而且和 Vue.js 2.x 相比变化非常大，这就导致了现在很多和 Vue.js配套的库，特别是和 UI...
使用 Butterfly 主题 搭建 Github Pages 上的 Hexo 博客
安装前提安装 Hexo 需要先安装下列应用程序： Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本) Git 安装 hexo cli1npm install hexo-cli -g 初始化博客项目 创建 hexo 博客项目文件夹： hujiyi.github.io 进入文件后， 打开 Git Bash 命令行窗口 输入命令执行初始化：hexo init 1$ hexo init 程序初始化过程如下所示： 1234567891011$ hexo initINFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.gitINFO Install dependencieswarning hexo-renderer-stylus > stylus > css-parse > css > urix@0.1.0: Please see...
flutter introduction part II：使用Provider 的深浅色模式和多语言切换
上一节创建了项目，并通过 Intl 实现在项目的多语言国际化支持。但是还没有在项目提供多语言的切换功能。 这一节除了实现多语言的选择切换功能，还同时实现项目的深色、浅色主题切换，需要用过以下两个包： Provider: Provider是 Google I/O 2019官方推荐的状态管理方式，是一套实现跨组件状态共享的解决方案。 shared_preferences : shared_preferences 是一个轻量级存储类，以键值对的形式保存设置，属性和数据。 准备工作在项目的 pubspec.yaml 文件中增加以下包依赖： Provider的最新版本查询：https://pub.dev/packages/providershared_preferences的最新版本查询：https://pub.dev/packages/shared_preferences 123456789101112dependencies: flutter: sdk: flutter # 国际化 flutter_localizations: sdk: flutter ...
flutter introduction part I：创建项目及多语言国际化支持
特别说明：Flutter SDK 1.22.5 及以上版本需要依赖 Git ， 所以下面输入 flutter命令的时候，一般都是在 Git Bash 命令行窗口 中进行。 D:\sources\flutter_repos 是专门用于保存 Flutter 项目的文件夹。 创建项目在 D:\sources\flutter_repos(或其他用于保存 Flutter 项目的文件夹) 文件夹下鼠标右键，在弹出的快捷菜单中选择Git Bash Here 打开 Git Bash 命令行窗口 在打开的Git Bash 命令行窗口中输入命令： flutter create...
Visual Studio Code 中使用 flutter_intl 实现 Flutter 应用国际化
·Flutter Intl· 插件，包含用于处理国际化/本地化消息，日期和数字格式和解析，双向文本以及其他国际化问题。 安装 Flutter Intl 插件 在项目的 pubspec.yaml 文件中添加依赖： 123456dependencies: flutter: sdk: flutter # 国际化 flutter_localizations: sdk: flutter 初始化项目在Visual Studio Code中打开命令面板: View -> Command Palette… 在打开的命令面板中输入 flutter intl, 在下拉的命令项中选择：Flutter Intl: Initialze， 开始执行项目的初始化。 初始化执行成功后，会自动在 pubspec.yaml 末尾增加： 12flutter_intl: enabled: true 同时在 lib 文件夹下生成 generated 和 l10n 两个文件夹 generated包下的intl目录默认生成 messages_all.dart 和...
创建基于 Vuetify 和 leancloud 的 Vue.js 应用程序(二)
路由规划本项目在实现的是一个论坛网站，网站划分为三个部分: 前台用户界面：主要是论坛的主题；主题的详细内容及评论； 帐号管理界面：主要是注册、登录等功能； 后台管理界面：主要是主题的管理；评论内容的管理等功能； 修改路由文件打开文件：src/router/index.js， 编辑其内容如以下代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);const routes = [ { path: '/', // 前台页面模块及其嵌套子路由 ...
创建基于 Vuetify 和 leancloud 的 Vue.js 应用程序(一)
假设各位的电脑已经安装好配置了相应的开发环境： node.js yarn @vue/cli Visual Studio Code 创建项目包管理工具 npm 和 yarn npm 和 yarn 都是包管理工具， npm 是node.js自带的，yarn 需要额外安装。在使用一段时间之后，我现在比较喜欢使用 yarn, 至于优点，网上列出来的主要有这么几个：速度快、安装版本统一、输出信息更简洁等等。 所以在下面的操作过程中，基本上就按照自己的习惯使用yarn 来完成，如果自己不习惯这个命令的话，也可以自行使用相应的 npm 命令来操作。只要得到的结果一样就可以了。 Vue.js 2.x 和 Vue.js 3.x 的选择 Vue.js 3.x 的正式版发布已经有一段时间了，而且和 Vue.js 2.x 相比变化非常大，这就导致了现在很多和 Vue.js配套的库，特别是和 UI 有关的库大部分都还没有来得及未完成新版本的适配。虽然以后肯定是会升级到 Vue.js 3.x，但就目前阶段来说，继续使用 Vue.js 2.x...
