程序员经验分享-hwhale

Vue极简使用

2023-11-15

安装Vue

安装nodejs
这里我安装的是14.5.4版本

https://nodejs.org/download/release/v14.15.4/

在这里插入图片描述
解压后配置一下环境变量就行
在这里插入图片描述
在这里插入图片描述
安装cnpm镜像 (这个安装的版本可能过高，后面安装Vue可能出问题)

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
登录Vue官网
注意：这里我们安装和使用的都是Vue2版本

https://v2.vuejs.org/

在这里插入图片描述
进入Vue CLI
在这里插入图片描述
使用cnpm安装Vue：npm install -g @vue/cli
报错 Error: Cannot find module ‘diagnostics_channel’
在这里插入图片描述
解决办法，降低cnpm版本

npm uninstall -g cnpm

在这里插入图片描述

npm install cnpm@7.1.0 -g --registry=https://registry.npm.taobao.org

在这里插入图片描述
安装成功cnpm
在这里插入图片描述
再来安装Vue

cnpm install -g @vue/cli

在这里插入图片描述
成功安装Vue
在这里插入图片描述
开始创建项目
先使用VScode开发工具,并添加高亮显示扩展工具vetur
在这里插入图片描述
在这里插入图片描述
文件夹显示插件VSCode-Icons
(为项目不同类型的文件赋予不同的图标。让我们更容易区分不同的文件类型)
在这里插入图片描述
在这里插入图片描述

打开项目文件夹
在这里插入图片描述
再项目文件夹中建立新项目(my-project)

vue create my-project

在这里插入图片描述
在这里插入图片描述
那么我还是使用CMD新建项目…

在这里插入图片描述
选择手动版本
在这里插入图片描述
空格选择这俩个
在这里插入图片描述
2版本
在这里插入图片描述
文件存放位置，这个随意
在这里插入图片描述
不保存之前的配置
在这里插入图片描述
开始安装
在这里插入图片描述
成功
在这里插入图片描述
回到vscode运行项目
在这里插入图片描述
在这里插入图片描述
到項目的目录下执行：

npm run serve

在这里插入图片描述
成功构建和运行了项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
支持手机端模拟显示
在这里插入图片描述
基于webpack构建工具，支持热部署(在vue启动期间,如果文件发生改变,vue无需重新启动,刷新页面即可)。
目录结构
在这里插入图片描述
就是项目依赖文件夹（不用传给别人这个，多此一举）
在这里插入图片描述
主目录和资源文件
在这里插入图片描述

源码文件
在这里插入图片描述

模板语法

https://v2.cn.vuejs.org/v2/guide/

在这里插入图片描述
三段构成APP.vue
在这里插入图片描述
v-开头都是指令
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

小Tips

vuejs

javascript

前端

Vue极简使用 的相关文章

  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr

  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp

  • 如何在 JS Rails 响应中包含 HTML？

    我有一个响应 HTML 和 JS AJAX 查询的 FooController app controllers foo controller rb class FooController lt ApplicationController l

  • 使用JQuery检查元素是否有边框？

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo

  • 使用 javascript 将 html 文本渲染为位图，无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can

  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个

  • javascript中输入类型时间的值

    我有这个html

  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota

  • 为什么 JSON.stringify 对于似乎具有属性的对象返回空对象符号“{}”？

    下面的例子表明JSON stringify 返回字符串 对于 SpeechSynthesisVoice 对象 var voiceObject window speechSynthesis getVoices 0 JSON stringify

  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无

  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏

  • Vue 监听 Vuex 提交吗？

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过

  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href

  • Javascript 正则表达式来匹配正则表达式

    我正在研究一个特殊的正则表达式来匹配 javascript 正则表达式 现在我有这个正则表达式工作 i g m 例如 foo match i g m gt foo foo undefined foo i match i g m gt foo

  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp

  • 当条件评估为 true 时获取元素（扩展 ElementArrayFinder）

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul

  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh

  • Jquery 两个字段的时间差（以小时为单位）

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2

  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到

  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • 2020/09/28 轮播react-slick报错 can`t resolve ‘react-slick‘

    报错 前提 我已经按照官网安装好了 npm install react slick save npm install slick carousel save 并且引入了css样式 import slick carousel slick sl

  • 强化学习（Reinforcement Learning）知识整理

    马尔可夫决策过程 Markov Decision Processes MDPs MDPs 简单说就是一个智能体 Agent 采取行动 Action 从而改变自己的状态 State 获得奖励 Reward 与环境 Environment 发生

  • 数字IC手撕代码-有限状态机FSM-饮料机

    前言 本专栏旨在记录高频笔面试手撕代码题 以备数字前端秋招 本专栏所有文章提供原理分析 代码及波形 所有代码均经过本人验证 目录如下 1 数字IC手撕代码 分频器 任意偶数分频 2 数字IC手撕代码 分频器 任意奇数分频 3 数字IC手撕代

  • Rings‘ Power,性能“世界第一”的Web I/O框架

    UringNet设计的思路和参考 在2019年 从Linux内核5 1开始 引入了io uring这样的异步框架 io uring的设计非常精巧 经过验证 其性能极其强悍 在文件读写的领域已经证明了其巨大的价值 很多数据库系统的底层已经引入

  • 物联网会是下一个支柱产业吗？

    近年来 物联网 IoT 无疑已成为一个重要且快速增长的行业 尽管绝对确定地预测未来具有挑战性 但许多专家和分析师认为 物联网有潜力成为支柱产业 对各个行业产生变革性影响 物联网是指由可以收集 交换和分析数据的互连设备 传感器和系统组成的网络

  • C语言 二级指针的定义与理解

    二级指针定义格式 类型 指针名 例 int p 二级指针用于存储一级指针的内存地址 二级指针赋值实例 int p a int pp p 注意 只能同等类型赋值 不能不同类型赋值 例如 char p a int pp p 因为int占4字节

  • TortoiseGit回退还原指定提交的代码记录

    根据提交日志还原本地的代码 再将本地的代码提交 一 同步本地代码到最新 并查看提交日志 二 选中提交的记录 开始退回本地的代码 三 点击OK 本地代码回退完成 尽量不要点击commit 四 点击OK 查看本地已经退回还原的代码 是否准确 五

  • 计算机毕业设计中用python神经网络编程实现手写数字识别

    本文实例为大家分享了python实现手写数字识别的具体代码 供大家参考 具体内容如下 import numpy import scipy special import matplotlib pyplot class neuralNetwor

  • 浏览器地址栏更改url参数 页面还发送原url参数的请求bug修复

    在做定时刷新大屏的需求 需要定时发送一遍请求刷新最新数据 this timer setInterval gt that getFun1 that getFun2 that getFun3 that getFun4 60 1000 其中get

  • 【Unity疑难杂症#持续更新……】

    目录 1 Unity打包时 自定义shader没效果 2 Unity打包ios时动画不播放 3 Android Unable to merge android manifest Error 4 Unity打到刘海屏的Android手机上不能

  • php上传图片到MySQL数据库代码如下

    效果图入下 用到两个php文件 index php上传图片 img php获取图片 index php代码如下

  • 2023华为OD机试真题 C++【分奖金/单调栈】

    题目 代码 include

  • C++ 标准库

    C 标准库可以分为两部分 标准函数库 这个库是由通用的 独立的 不属于任何类的函数组成的 函数库继承自 C 语言 面向对象类库 这个库是类及其相关函数的集合 C 标准库包含了所有的 C 标准库 为了支持类型安全 做了一定的添加和修改 标准函

  • Seaborn系列教程（5）

    seaborn countplot 计数图 柱状图 解析 使用条形图 柱状图 显示每个分类数据中的数量统计 seaborn countplot x None y None hue None data None order None hue

  • 【Linux】缓冲区/磁盘inode/动静态库制作

    需要云服务器等云产品来学习Linux的同学可以移步 gt 腾讯云 lt gt 阿里云 lt gt 华为云 lt 官网 轻量型云服务器低至112元 年 新用户首次下单享超低折扣 目录 一 缓冲区 1 缓冲区的概念 2 缓冲区的意义 3 缓冲区

  • 【mitmproxy】python gui工具与mitmproxy的结合使用

    mitmproxy介绍 mitmproxy是一款流行的开源工具 用于拦截 修改和检查网络流量 它可以在中间人攻击 Man in the Middle 的场景下用于分析 调试和测试网络应用程序 其他地方很多介绍 可以跳过 以下是mitmpro

  • linux内核oops错误码说明,调试 – 了解内核oops错误代码

    在ARM的内核oops中跟踪日志打印在内核日志中 lt 1 gt 4205 112835 I 0 swapper 0 0 c0 Unable to handle kernel paging request at virtual addres

  • FPGA开发(4)——AXI_LITE总线协议

    一 AXI总线简介 对于axi总线的学习我主要是参考了赛灵思的ug1037文档以及arm的INI0022D手册 对其中的内容做了总结 AXI是amba总线的一种 包含三种 axi full axi lite和axi stream AXI工作

  • 关于CentOS7虚拟机配置静态IP地址及ping不通通百度等官网

    一 IP地址的配置 1 查看MAC地址 点击 虚拟机 gt gt gt 设置 gt gt gt 网络适配器 gt gt gt 高级 gt gt gt 记住MAC地址 后面会用到 2 查看子网掩码和网关IP 点击 编辑 gt gt gt 虚拟

  • Vue极简使用

    Vue 安装Vue 模板语法 安装Vue 安装nodejs 这里我安装的是14 5 4版本 https nodejs org download release v14 15 4 解压后配置一下环境变量就行 安装cnpm镜像 这个安装的版本可

热门标签