程序员经验分享-hwhale

创建Vue项目(demo)教程

2023-11-14

如何创建个人Demo

1: 环境准备

安装node.js

node官网: https://nodejs.org/zh-cn/

安装完成后查看版本
打开 cmd 命窗口,使用 node -v 查看版本号
出现版本号即安装成功

node -v

npm -v

安装淘宝镜像: 
npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
为什么使用cnpm?
两者只是node中包管理器的不同, npm是node官方版的包管理器, cnpm是中国版的npm, 是淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm
简单理解为cnpm更加快速一点

2: 创建文件夹作为项目容器

1: 创建文件夹
在这里插入图片描述
2: 进入文件夹右键打开命令行
在这里插入图片描述
3: 在终端里输入命令开始创建自己的vue项目
vue create + 自定义项目名

vue create demo

在这里插入图片描述
4: 选择配置信息 使用上下方向键选择 确定后回车继续下一步
在这里插入图片描述
5: 等待安装

在这里插入图片描述
6: 安装成功
在这里插入图片描述

3: 安装成功后使用编辑器打开该文件

注意提示 npm run serve 为项目运行命令
如何分辨npm run serve 还是npm run dev ?
打开编辑器, 找到项目文件的位置并打开
在这里插入图片描述
在这里插入图片描述
在package.json文件中查看
在这里插入图片描述

4: 运行项目

1: 到创建文件夹目录下使用npm run serve 运行
在这里插入图片描述
2: 用浏览器打开
使用ctrl+鼠标左键单击http://localhost:8080/即可打开
3: 效果展示:
在这里插入图片描述

  • 初始化项目各文件与文件夹说明
    在这里插入图片描述
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

前端

前端框架

nodejs

创建Vue项目(demo)教程 的相关文章

  • nodejs：process.stdout.write 的短别名

    我正在学习nodejs 而且我喜欢它 我试图弄清楚如何使用更短的别名console log我发现我可以使用var cout console log并使用cout string 从那时起 然后当我想使用process stdout write

  • Express 4.x 在 2 分钟后关闭连接

    我有一个简单的节点应用程序来处理GET foo 此请求需要一些时间来计算并返回文件 每次请求持续超过2分钟 连接就会关闭 我正在使用 Express 4 10 2 和节点 0 10 32 我读到 http 模块的默认超时为 2 分钟 htt

  • 使用 Mongoose 在 JSLint 中抑制“需要一个标识符，而是看到“默认”（保留字）”

    我在用着jshint验证我的 JavaScript 文件 在服务器端 我使用 Node js 和 Mongoose 在 Mongoose 中 我被鼓励以如下方式编写模式 var UserSchema new mongoose Schema

  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task

  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n

  • Google App Engine CORS“解析 ./app.yaml 时出错：未知的 url 处理程序类型”

    我正在尝试将 CORS 应用到我的一个应用程序引擎 但遇到错误 我尝试查看其他答案 间距 的建议 但仍然错误 app yaml runtime nodejs10 env variables NODE ENV production CLOUD

  • 如何使用 vue 观察对象数组中的特定属性

    我正在使用 vue js 2 5 2 我有一个对象数组 我想观察 forms selected 如果它发生变化 则调用一个函数 这是我的尝试 但显然这是不正确的 我尝试将数组放入 for 循环中以观察所选的每个对象的属性 watch for

  • Node.js req.body 在表单数据内容类型中未定义

    在这里 我为这个表单数据传递 API 创建了一个小演示 现在我正在使用邮递员检查此 API 但我没有收到任何数据 Code const http require http const express require express cons

  • MongoDB req.body 问题

    我有一个非常简单的 Mongo 设置 如下所示 这非常适合从输入字段获取数据并保存数据 一切都在工作 我的问题 我将如何循环遍历前端的 jobs 变量并设置数据 以便它适用于我的模型 不知何故 我需要将其输入到输入中 以便我可以 req b

  • 文件太大错误处理 Nodejs Express Multer

    我将 multer 与 ExpressJS 一起使用 我想将文件上传限制为 0 5 MB var limits fileSize 0 5 1024 1024 var upload multer dest public uploads lim

  • 接近堆限制的无效标记压缩分配 Angular 8 - JavaScript 堆内存不足

    42 构建 274 275 模块 1 个活动模块 src index js 提取 D Clients app node modules sass loader lib loader js ref 15 3 D src styles scss

  • 如何模拟 typeORM 的 getCustomRepository

    我想对一个在其构造函数中使用 getCustomRepository 的类进行单元测试 但我只是想不出一种简单的方法来模拟它 这是我的班级代码 import getCustomRepository from typeorm export c

  • NodeJS 中的密码重置

    我已经设置使用 NodeJS Passport 更新用户的密码 我遵循了这个很棒的指南 http sahatyalkabov com how to implement password reset in nodejs http sahaty

  • MongoDB - 在父文档中填充 GridFS 文件元数据

    我使用 NodeJS 与 Express MongoDB Mongoose 和 GridFS 来上传和检索文件 我想通过 ID 引用其他文档中的文件 并在查询其他文档时填充文件元数据 例如 如果我有一个包含这样的文档的 用户 集合 id O

  • 在 firebase 函数中设置 dotenv

    我正在尝试将我制作的小型节点表达应用程序移动到 firebase 函数中 该文件有dotenv变量 早些时候我想如果我只是部署并依赖 dotenv 它会起作用 但那并没有发生 于是 我去了firebase的环境配置文章了解如何设置 env

  • 如何使用redis发布/订阅

    目前我正在使用node js和redis来构建应用程序 我使用redis的原因是因为发布 订阅功能 该应用程序只是在用户进入用户或离开房间时通知经理 function publishMsg channel mssage redisClien

  • 使用 vue-cli 服务时如何禁用 linting？

    我正在使用以下命令使用 vue cli 运行我的项目 vue cli service 服务 open 如何禁用所有 linting 目前每次保存时都会重新进行 linting 并且更改代码需要很长时间 我已经把 lintOnSave fal

  • Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件

    我正在开发一个用 Vue js 开发的单页应用程序 托管在 Node js 服务器上 目前它仍在开发中 但最终将暴露给外部客户 并且由于我们将处理敏感数据 我们希望避免在用户检查元素时看到 vue 文件和相对文件树结构在开发工具中 See

  • AWS DynamoDb DocumentClient - 从项目数组创建批量写入 - node.js

    我正在尝试执行batchWrite使用 DynamoDB 的操作DocumentClient来自项目数组 JSON 这是我的代码 var items for i 0 i lt orders length i var ord orders i

  • Webworker-threads：在工作线程中使用“require”可以吗？

    使用 Sails js 我正在测试 webworker threads https www npmjs com package webworker threads https www npmjs com package webworker

随机推荐

  • java远程连接linux并发送命令，两种方案比较Jsch与ganymed-ssh2

    通过Jsch连接 step 1引入jar包

  • k8s之ReplicaSet

    我们在定义pod资源时 可以直接创建一个kind Pod类型的自主式pod 但是这存在一个问题 假如pod被删除了 那这个pod就不能自我恢复 就会彻底被删除 线上这种情况非常危险 所以今天就给大家讲解下pod的控制器 所谓控制器就是能够管

  • Log4cpp:为中小型C++项目加上log支持

    对于一个上点规模的C 项目而言 Log的作用是毋庸置疑的 出问题的时候 看了Log 常见的问题处理起来自是方便不过 即使遇到麻烦的问题 也可以从 总发现不少蛛丝马迹 因此一个严肃的项目应该从一开始就好好考虑如何打Log 便于分析 维护 现实

  • Selenium3自动化测试【6】浏览器driver的安装（FireFox）

    Selenium支持各种浏览器 读者可以在不同的浏览器中开展自动化测试 它支持的浏览器包括IE FireFox Chrome Opera Safari等 本讲就围绕常用的FireFox Chrome与Selenium的结合进行讲解 由于Se

  • 遥测终端机RTU助力城市内涝监测系统

    一 背景概述 2023年第5号台风 杜苏芮 周末登陆福建晋江 一波未平一波又起 卡努台风也进入了48小时警戒线 台风侵袭给城市基础设施和居民生活带来了严重的影响 后面第11号台风 海葵 号随之带来了更多城市内涝问题 且难以一下子解决 为了有

  • iOS 开发之CocoaPods常用第三方框架导入

    1 使用终端打开文件 假设项目放在桌面上 cd Desktop cd 项目名称 2 创建Podfile文件 命令如下 vim Podfile 3 输入 i 进入编辑模式并copy下面的这段代码 platform ios 8 0 target

  • C语言比较两个字符串是否相等的案例讲解

    思路分析 比较两个字符串是否相等要看两个字符串的长度和内容是否一样 如果长度和内容有一个不一样那么这两个字符串不相等 方法1 strcmp函数可以比较2个字符串的大小和内容是否一样 我们可以使用这个函数来进行判断 知识补充 strcmp函数

  • Node.js——回调函数及事件处理机制

    目录 回调函数 定义 理解 事件处理机制 补充 回调函数 定义 什么是回调函数呢 通俗的讲 将一个函数A作为参数传递给函数B 在函数B内对函数A进行调用 函数A就是回调函数 Node js 异步编程的直接体现就是回调 回调函数在完成任务后就

  • VM虚拟机安装Ubantu18.04【踩坑无数】【指路合集】

    写在前面 因为自己最近正在学习 作为一个小白 也遇到了很多问题 这里一起记录一下给大家遇到相同问题的指指路 其实内容多难倒也没有 跟着教程走也不会有什么难度 只希望能减少遇到同样问题的人search有效信息的来解决自己问题的时间 安装教程指

  • git warning: LF will be replaced by CRLF in package.json解决办法

    在修改了package json文件之后 使用git add 提交代码出现以下报错 warning LF will be replaced by CRLF in package json The file will have its ori

  • JVM线上故障排查的基本操作

    前言 线上经常会遇到各种各样的问题 CPU 飚高 内存溢出 频繁 GC 总的来说 基本上就是cpu 磁盘 内存以及网络等相关问题 所以进行排查时候尽量四个方面依次排查一遍 同时例如jstack jmap等工具也是不囿于一个方面的问题的 基本

  • [Python] 转贴:anaconda 下多版本Python 安装说明(win10)

    anaconda 下多版本Python 安装说明 转贴再补充 原帖见 https blog csdn net soloyuyang article details 75807425在原帖基础上补充了图 但是主要工作还是原帖的 win10系统

  • android 串口开发

    FT312D有参考

  • AD批量隐藏元件注释(Comment)

    步骤 1 右击元件注释在菜单中选中 Find Similar Objects 查找相似元件 2 在弹出来的菜单中 在Part comment 后面的下拉框中选择Same 即设定筛选条件为筛选所有相同comment的元件 然后点击OK 最后点

  • HttpComponents入门解析

    1 简介 超文本传输协议 http 是目前互联网上极其普遍的传输协议 它为构建功能丰富 绚丽多彩的网页提供了强大的支持 构建一个网站 通常无需直接操作http协议 目前流行的WEB框架已经透明的将这些底层功能封装的很好了 如常见的J2EE

  • java 关于锁常见面试题

    1 synchronized作用于静态方法和非静态方法的区别 非静态方法 给对象加锁 可以理解为给这个对象的内存上锁 注意 只是这块内存 其他同类对象都会有各自的内存锁 这时候在其他一个以上线程中执行该对象的这个同步方法 注意 是该对象 就

  • 「考生说」双非考生依旧可以成为“天选之子”

    随着2022年考研复试季的结束 微博热搜开始被 六战法考最终上岸的北大物业小哥刘政 中专生考进清华 等词条刷屏 大批网友也开启了他们 夸夸 能力 在这大量的评论中依旧有着众多让人鼓舞的金句产出 你不需要很厉害才能开始 但你需要开始才能很厉害

  • 【计算机图形学课程】二.MFC鼠标响应函数模拟画图软件

    上一篇文章我们讲述MFC绘制图形的基本函数 包括绘制直线 绘制矩形 绘制椭圆及绘制文字 同时通过绕圆旋转和矩形平移简单的理解了图形学知识 这篇文章我将介绍鼠标响应和键盘响应 通过这些事件让学生实现一个类似画图的简单软件 同时充分发挥学生想象

  • 【新手教程】Windows本地化安装、运行，部署Auto-GPT

    Windows安装 运行Auto GPT 第一 准备条件 OpenAI Key 请登录官网获取 sk RhLoBodCbL6AAlyuYeC8T3BlbkFJ5vJfX9P5Md504SmADtth 第二 环境搭建 2 1安装python

  • 创建Vue项目(demo)教程

    如何创建个人Demo 1 环境准备 安装node js node官网 https nodejs org zh cn 安装完成后查看版本 打开 cmd 命窗口 使用 node v 查看版本号 出现版本号即安装成功 node v npm v 安

热门标签