文章目录
Vue3 + Vant UI_多功能记账本
终端键入以下指令，每一行命令跟一个回车（也可以使用 npm，方法类似）
// 创建 vite-app 项目
yarn create vite-app daily-cost
// 定位到 daily-cost 目录
cd daily-cost
// 添加依赖
yarn
// 启动项目
npm dev
安装路由插件
yarn add vue-router@next
在 src 目录下创建 router 文件夹，router 文件夹里面创建 index.js 文件，用于路由的配置
./src/router/index.js
// 用的是 hash 路由，不需要后端支持
import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
// 创建路由实例
const router = createRouter({
history: createWebHashHistory(), // hash 模式
routes: [
{
path: "/",
component: Home
}
]
})
// 抛出路由实例
export default router
在 src 目录下创建 views 文件夹，views 文件夹里面创建 Hello.vue 组件，让路径能渲染出内容
./src/views/Hello.vue
<template>
<div>前端杂货铺</div>
</template>
<script>
export default {};
</script>
在 main.js 文件中 导入并使用路由，记得拆分一下源代码，好让 router 被使用
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'
const app = createApp(App)
app.use(router)
app.mount('#app')
在 App.vue 组件中导入 Hello.vue 组件，并做出呈现
App.vue
<template>
<router-view />
</template>
<script>
import Home from './views/Home.vue'
export default {
name: 'App',
components: {
Home
}
}
</script>
此时，yarn dev，打开浏览器可以看到…
安装 Vant UI 组件库（ Vant UI 国内地址）
yarn add vant@3.0.0-beta.8 -S
添加按需引入的插件（减少代码量，加快项目的启动）
yarn add babel-plugin-import -D
在根目录添加 babel.config.js，代码如下
module.exports = {
plugins: [
[
"import",
{
libraryName: "vant",
libraryDirectory: "es",
style: true,
},
"vant",
],
],
};
在 main.js 文件中导入样式并按需注册组件
import { createApp } from 'vue'
import {Button} from 'vant'
import App from './App.vue'
import router from './router'
import "vant/lib/index.css"; // 全局引入样式
import './index.css'
// 创建实例
const app = createApp(App)
// 注册组件 => 按需注册
app.use(Button)
app.use(router)
app.mount('#app')
在 Hello.vue 组件中，随便添加一个组件做测试（中号的警告按钮）
<template>
<div>前端杂货铺</div>
<van-button type="warning" size="middle">中号按钮</van-button>
</template>
<script>
export default {};
</script>
此时，yarn dev，打开浏览器可以看到…
本项目是一个移动端的项目，需要使用 rem 做不同手机型号的适配
Vant 中的样式默认使用 px 作为单位，如果要使用 rem 单位，可使用以下两个工具
接下来，安装它们
yarn add lib-flexible -S
yarn add postcss-pxtorem -D
在 main.js 引入 lib-flexible
main.js
import { createApp } from 'vue'
import {Button} from 'vant'
import "lib-flexible/flexible";
import App from './App.vue'
import router from './router'
import "vant/lib/index.css"; // 全局引入样式
import './index.css'
// 创建实例
const app = createApp(App)
// 注册组件 => 按需注册
app.use(Button)
app.use(router)
app.mount('#app')
在根目录声明 postcss.config.js 文件，为 px 单位转 rem 单位做配置
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字体的大小
propList: ['*'],
selectorBlackList: [".norem"] // 过滤掉.norem-开头的 class，不进行 rem 转换
}
}
}
在 Hello.vue 组件设置一个 div 样式，测试 rem 适配是否成功
Hello.vue
<template>
<div class="demo">前端杂货铺</div>
<van-button type="warning" size="middle">中号按钮</van-button>
</template>
<script>
export default {};
</script>
<style scoped>
.demo {
width: 100px;
height: 100px;
background: aquamarine;
}
</style>
此时，yarn dev，打开浏览器可以看到…
首先，注册个人账户
之后，新建自己的项目
随便添加一个图标到库
选择项目，添加购物车的图标到项目中
生成 hash 码
生成的 hash码 添加至 index.html 文件（注意：每次新增图标后，都要重新生成新的 css 静态资源，需要在这里替换最新的路径）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3639381_k7hsr2nrb2j.css">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
在 Hello.vue 中添加图标，测试是否可以使用
Hello.vue
<template>
<div class="demo">前端杂货铺</div>
<i class="iconfont icon-bianji"></i>
<van-button type="warning" size="middle">中号按钮</van-button>
</template>
<script>
export default {};
</script>
<style scoped>
.demo {
width: 100px;
height: 100px;
background: aquamarine;
}
</style>
此时，yarn dev，打开浏览器可以看到图标显示出来…
在 src 目录下创建 utils 文件夹，该文件夹下创建 axios.js 文件
import axios from "axios";
import { Toast } from "vant";
import { useRouter } from "vue-router";
axios.defaults.baseURL =
process.env.NODE_ENV == "development"
? "//localhost:3000"
: "//192.168.1.6:3000/"; // 根据环境变量切换本地和线上的请求地址
axios.defaults.withCredentials = true; // 允许跨域
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["token"] = localStorage.getItem("token") || ""; // 本项目采用 token 的用户鉴权方式，在请求头的 headers 内添加 token，每次请求都会验证用户信息
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.interceptors.response.use((res) => {
const router = useRouter(); // vue-router 4.x 的实例
if (typeof res.data !== "object") {
Toast.fail("服务端异常！");
return Promise.reject(res);
}
// code 非 200 的情况下为异常情况
if (res.data.code != 200) {
if (res.data.msg) Toast.fail(res.data.msg);
if (res.data.code == 401) {
router.push({ path: "/login" });
}
return Promise.reject(res.data);
}
// 其他情况直接返回 data 数据
return res.data;
});
export default axios;
安装 Less 插件
npm i less less-loader -D
在 src 目录下新建 config 文件夹，在里面新建 custom.less 文件
custom.less
@primary: #18b7d3; // 主题色
@danger: #fc3c0c;
@primary-bg: #f5f5f5;
看到这么好的项目，是不是有种想自己做出来的冲动？
如果有，那么说明你非常的想提升自己，想检验自己这段时间的学习成果，这个项目绝对是你的 不二选择
心动不如行动
那么接下来，一起从0搭建，开始我们基于 Vue3.x + Vant UI 的项目之旅吧~
源码会放在下方的微信公众号里（约九月中旬更新完毕）【回复：记账本】即可
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc