一个简单的vue项目案例（一）项目准备工作

最新推荐文章于 2024-08-26 15:31:15 发布

恐小龙

最新推荐文章于 2024-08-26 15:31:15 发布

阅读量325

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/yyun05/article/details/119839037

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、创建项目

二、运行项目

三、清空自带的内容

四、下载并引用reset.css ，重置样式

https://meyerweb.com/eric/tools/css/reset/

在main.js中引用

//reset.css ===> 重置样式
import './assets/css/reset.css'

五、下载并引用fastClick，重置样式

GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs

用法：https://www.jianshu.com/p/150c305f6930

在main.js中引用

//fastClick ===> 解决click事件在移动端300ms延迟的问题
import FastClick from 'fastclick'
FastClick.attach(document.body);

六、下载字体图标

https://www.iconfont.cn/

放入项目文件夹，并修改iconfont.css文件中的路径

在main.js中引用

//引入字体图标
import './assets/css/iconfont.css'

复制代码，在App.vue中，测试引入效果

<i class="iconfont">&#xe617;</i>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

恐小龙

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue项目demo汇总

前端视听

09-09

1万+

vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目，这些源码稍微学习其中的几个，基础能力都能够有所进步。 1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.

vue怎么给pc端浏览器设置一个最小屏幕_vue项目实现移动端适配的案例

weixin_39857174的博客

10-27

1446

前言：使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。1 准备工作：a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；b. 安装 lib-flexible 插件：npm install lib-flexible --sav...

参与评论您还未登录，请先登录后发表或查看评论

vue简单项目实例（router方式）

07-04

vue-cli搭建的vue实例，用router和组件的简单实例，下载后请cnpm install后npm run dev运行

vue的一个简单案例

Yuncoco的博客

07-13

596

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css" ...

手把手教你做小兔鲜网站(vue3实战)

最新发布

cghhbvcgjb的博客

08-26

768

1、路由配置：三级路由2、个人中心信息渲染（个人信息部分直接使用Pinia中的数据，猜你喜欢部分走接口获取）3、tab切换获取状态数据并渲染4、分页逻辑实现然后就ok了终于写完了，这下可以好好玩黑神话悟空了。

一、vue简单示例

光明小学王小雨的博客

10-28

3875

一、django模板变量和vue冲突解决 {{ }} 如果不可避免的在同一个页面里既有 django 渲染又有 vue 渲染的部分，可有 2 种方式解决方法一：采用 vue 的 delimiters 分隔符。 new Vue({ delimiters: ["{[", "]}"] // 可自定义符号 }) 方法二：建议把 vue 的部分用 {% verbatim %} 包起来。我这里使用这种方法见文档：https://docs.djangoproject.com/en/2.2/ref/templa

Vue 入门简单示例

Elvira_Sunset的博客

06-11

1258

#Vue ##1、创建Vue实例展示在页面上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cd

使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析

08-28

至此，你已经成功地使用 Vue CLI 创建了一个简单的 "HelloWorld" 示例。总结一下，Vue CLI 提供了一种高效的方式来搭建 Vue.js 应用。通过配置合适的模板，安装必要的依赖，以及启动开发服务器，你可以快速地开始...

springboot+vue实现登录案例（附VUE整个项目代码）

qq_45821255的博客

08-31

5741

实现Springboot+vue项目登录模块

尚硅谷部署微型服务器（前端）并部署vue项目案例

new_baibai的博客

11-23

778

打包vue项目到自己部署的微型服务器（前端）（尚硅谷）

vue项目环境搭建及一个简单的vue例子

四月

04-01

569

https://blog.csdn.net/qq_33036599/article/details/79656597 准备工作：安装node，vue-cli脚手架 1.安装 node （https://nodejs.org/en/）在命令行输入 node -v 查看是否安装成功淘宝的cnpm命令管理工具可以代替默认的npm管理工具： $ npm install-g...

vue项目实例

04-01

新手学习vue的最佳demo实例，整合了vue的各类组件以及各种指令等等

一个关于Vue的实例项目

01-16

一个非常不错的Vue实例项目，可以用来学习参考，里面还有附带部署的步骤

vue项目例子

03-15

这是一个完整的项目的案例，关于一个微信公众号的，从项目的部署开始各个页面都有。

VUE前端小例子

03-25

VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。

一个简单的vue项目案例（二）目录结构搭建

yyun05的博客

08-21

252

目录结构 Home引用Banner <template> <div class="home"> <Banner></Banner> </div> </template> <script> import Banner from './Banner' export default { components:{ Banner } } </scrip.

【vue小案例】

qq_47168657的博客

11-06

413

vue的双for循环案例，表格案例，选项卡切换发布评论案例

Vue简单入门案例——个人学习笔记-使用IDEA（非教程）

zcylxzyh的博客

07-26

2107

前言：这是我的第二篇个人学习的心得体会，这篇主要记录了对vue的简单入门，让大家可以更加了解vue的强大之处，希望大家多多包涵，共同进步（这个不是教程哦，主要是个人的学习笔记~）。 1.Vue简介： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于...

使用Vue重构自动建站项目：实践与经验分享

"本文主要介绍如何使用Vue.js构建一个自动建站项目，分享作者的实践经验，包括项目的背景、开发过程及遇到的问题，并提及了重构的决定以及开发所需的准备工作和技术选型。" 在现代Web开发中，Vue.js已经成为构建...