vue入门

最新推荐文章于 2022-11-25 11:17:09 发布
最新推荐文章于 2022-11-25 11:17:09 发布
阅读量157 收藏 1
点赞数
分类专栏： vue 文章标签： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx836/article/details/78933088
版权

选择路径->

vue init webpack 项目名
编辑器推荐用webstorm
用webstorm打开项目
src下创建 common根目录 和 header组件
先前的hello组件可以删除

这里写图片描述

header.vue

把header组件添加到App组件

这里写图片描述

这里的css选择用 stylus,需要添加相关依赖

这里写图片描述

进入主目录下package.json页面
"css-loader": "^0.28.0",下面添加
"stylus-loader": "^3.0.1",(版本自动提示)
打开cmd
cnpm install stylus安装完成 
npm run dev重启即可
此处index.html页面

这里写图片描述

页面效果如下

这里写图片描述

若创建项目时安装了vue-router
main.js页面 router会有影响

若创建项目时安装了 eslint约束
命令行会提示出错
需要编辑主页面下eslintrc.js里的rules
类似
'no-undef': 'off',
'no-multiple-empty-lines': 'off'
wx836
关注
专栏目录
Vue入门基础
XMY021016的博客
02-17 1360
Vue快速入门 1、Vue概述 (1) 什么是Vue vue是一套用于快捷开发前端应用的框架技术。它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手。 （2）Vue和其他框架 使用vue可以实现视图页面上的组件重复使用，提高了开发和维护的效率！同时优化了页面的加载和 渲染的效率，提高了用户体验。 --React： 重量级框架，一般中大型项目、大厂会直接使用React技术开发项目 封装较为彻底，定制化功能较差，需要有一定的技术门槛 运行时性能得到
Vue学习-Vue入门
weixin_59357453的博客
04-02 4373
这是一篇vue学习记录
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue入门——初步了解
秋书一叶的博客
11-25 3211
Vue的简单介绍及快速入门
Vue入门教程
tttalk的博客
12-23 5148
一、Vue介绍 简介：Vue.js（ /vjuː/） 是一套构建用户界面的渐进式框架, Vue只关注视图层， 采用自底向上增量开发的设计。 特点：响应式编程、组件化。 优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 注：这里是基于Vue2的教程，现在已经出了Vue3,但是还没完全普及，并且Vue3基本兼容Vue2，所以可以先学Vue2，再去了解Vue3的更新，后面会更新这部分内容。 二、安装 一般有三种方式：本地下载、CDN和NPM(推荐)。 1.本地下载地址：
Vue框架---Vue入门
鑫709的博客
04-26 6323
Vue概述 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 vue.js的核心特点—响应的数据绑定 传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑 响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中 为什么要学习vue 通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在需要手动操作DOM元素, 前端的Vue之类的框架, 不提.
Vue入门小案例
麻子的博客
04-22 2130
** VUE入门 ** vue入门案例01 入门案例-01代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.10.js"&...
若依-vue入门
weixin_41915066的博客
03-25 3326
1.若依（若依-vue） 1.1什么是若依？ 开源项目，学习开源项目的目标： 1、用，减少自己的工作量 2、 学习优秀开源项目底层的编程思想，设计思路，提高自己的变成能力 官网 基础：Spring Boot + Vue 环境要求： 1、JDK1.8+ 2、MySql 3、Redis 4、Maven 5、Vue 1.2使用若依 使用开源项目的步骤： 1、 下载并运行 2、 看懂业务流程 3、 进行二次开发 下载： ​ ...
快速掌握 Vue 入门
oyang的博客
09-02 909
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架官网：https://cn.vuejs.org/Vue作者：尤雨溪/中国无锡优点：前后端工程师可以并行开发，项目交付更快MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步M：model数据模型V：view视图VM：ViewModel 视图模型 虚拟domV（修改数据） -> MM（修改数据） -> V数据是核心{text:后勤管理】}
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
ppt课件-第1章 Vue入门.zip
03-22
本课件“ppt课件-第1章 Vue入门.zip”是针对初学者设计的，旨在帮助学习者快速掌握Vue的基础知识和核心概念。 在Vue.js中，主要知识点包括： 1. **MVVM模式**：Vue采用Model-View-ViewModel架构，提供数据绑定和...
VUE入门
06-20
在“VUE入门”这门课程中，你将深入学习Vue的核心概念和技术，以便将它有效地应用到实际项目中。 首先，我们要理解Vue的**双向数据绑定**。这是Vue的一大亮点，它使得视图与模型之间的数据自动同步。Vue通过`v-...
获取svg图标的代码
wx836的博客
12-28 7128
获取svg图标代码步骤 1 打开icomoon网页： 点击IcoMoon App2 上传并生成代码点击Import Icons 上传自己的svg图片点击右下方generate fonts! : 3 获取代码 还可以更改preference,download代码即可
vue-devtools安装不上
wx836的博客
01-03 1778
cnpm rebuild node-sasscnpm install
Vue+ElementUI本地化环境搭建
wx836的博客
12-28 1614
Vue+ElementUI环境搭建ElementUI离线包下载ElementUI中文文档地部署 环境搭建 安装node 下载安装 http://nodejs.cn/download/ 查版本 node -v 安装vue-cli3 vue-cli3集成了大量webpack配置 安装 npm install -g @vue/cli 查版本 vue -V 创建项目 cmd中,启动项目管理器 vue ui 包管理器选择默认 预设选择手动配置（Babel、Router、Vuex、使用配置文件）
vue环境搭建
wx836的博客
12-28 497
1.安装node.js 官网下载即可 通过cmd输入node -v 检查是否安装 2.安装cnpm(淘宝镜像)快 npm有些资源在国外，申请服务器慢 在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待 3.安装vue-cli脚手架构建工具 在命令行中运行命令 cnpm install
vue 入门 demo
最新发布
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： 首先，你需要安装Vue CLI（命令行工具）来创建新的项目。如果你还没有安装，可以这样做： ```bash npm install -g @vue/cli ``` 然后创建一个新的Vue应用： ```bash vue create my-vue-app ``` 接下来，进入项目目录并启动服务： ```bash cd my-vue-app npm run serve ``` 现在打开浏览器访问`http://localhost:8080`，你会看到一个空白页面。我们来编写一个基本的Vue组件： 在`src/App.vue`文件中添加以下内容： ```html <template> <div id="app"> <h1>{{ message }}</h1> <button v-on:click="sayHello">点击我</button> </div> </template> <script> export default { data() { return { message: '你好，Vue世界！' }; }, methods: { sayHello() { this.message = 'Hello Vue!'; } } }; </script> <style> #app { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; } </style> ``` 在这个例子中，我们定义了一个数据属性`message`，并在模板中显示。当用户点击按钮时，`sayHello`方法会被触发，更新`message`的值。 这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值