安装vue-cli2.0并创建项目

news/2024/9/18 20:55:08/ 标签: vue.js, 前端, javascript, 前端框架

文章目录

  • 1 安装node
  • 2 安装vue-cli
  • 3 创建基于webpack模板的项目
  • 4 项目结构

1 安装node

  • 之前写的博客中介绍了如何安装:NodeJS的安装【windows】。
  • 安装完毕后,可以在命令行中输入node -vnpm -v,若出现版本号,则安装成功。

2 安装vue-cli

  • 输入npm install -g @vue/cli
  • 可能出现的错误:4048错误。
    解决方法:以管理员身份运行命令提示符,然后安装。
  • 输入vue -v,若出现版本号,则安装成功。

3 创建基于webpack模板的项目

  • 转到项目想要创建的文件夹,这里设置的是桌面:cd /d %userprofile%\Desktop
  • 输入vue init webpack todolist
    在这里插入图片描述
    这里可能会出现错误:Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and try again.,按照提示输入npm i -g @vue/cli-init 即可。
  • (若出现上述错误)再次输入 npm i -g @vue/cli-init,然后根据提示依次输入即可。
    在这里插入图片描述
  • 项目创建成功,启动项目:cd todolistnpm run dev
    在这里插入图片描述
  • 项目运行成功。在这里插入图片描述
  • 在浏览器输入localhost:8080可显示该页面。在这里插入图片描述

4 项目结构

  • build:项目的webpack配置文件。
  • config:针对开发环境和线上环境的一些配置文件。
  • node_modules:项目的依赖。
  • src:源代码,src-main.js:整个项目的入口文件。
  • static:静态资源。
    在这里插入图片描述

http://www.ppmy.cn/news/1518773.html

相关文章

Golang 读取文件

GoLang读取文件需要用到os类去打开文件,然后再用其他方式分析文件里的内容。打开文件比较简单,使用os.Open就可以了,记住用defer关闭就行。但是读取文件内容就头疼了,以文本文件为例子,就有各种方式 读取到byte数组 首…

我如何解决 java.lang.ClassNotFoundException:javax.xml.bind.DatatypeConverter

优质博文:IT-BLOG-CN 问题 我如何解决java.lang.ClassNotFoundException:javax.xml.bind.DatatypeConverter 2024-08-25T02:31:25.46202:00 ERROR 21868 --- [fintonic-oauth] [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet…

亚马逊云(AWS)技术深度解析及代码使用案例

亚马逊云(AWS)技术深度解析及代码使用案例 引言 亚马逊云(Amazon Web Services,简称AWS)作为全球云计算技术的首创者和领导者,以其强大的基础设施、丰富的服务种类以及卓越的安全性,持续引领着…

EmguCV学习笔记 VB.Net 第9章 视频操作

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

uniapp小程序实现横屏手写签名

<template><view class"signBox column-me"><!-- 这个是自定义的title-可根据自己封装的title的作为调整 --><status-bar title"电子签名" :bgColor"null"></status-bar><view class"topHint">请…

贪心算法---加油站

题目&#xff1a; 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数…

用 CSS 实现太阳系运行效果

介绍实现最终效果结语介绍 在编程的浩瀚宇宙中,我们总是在探索能够以最简洁的方式创造出最酷炫效果的方法。而使用 CSS 制作响应式太阳系,绝对能提升你的编程乐趣。 如何用 CSS 实现这个神奇的太阳系呢?关键在于巧妙运用 CSS 的动画、定位和尺寸属性。通过定义不同的元素来…

【论文阅读】基于生成对抗网络的模型窃取方法的研究(2021)

Research on Model Stealing Method Based on Generative Adversarial Networks 提出了一种基于生成对抗网络的模型窃取方法——GBMS(Generative adversarial networks Based Model Stealing method)&#xff0c;GBMS允许攻击者在没有真实数据的情况下训练替代模型&#xff0c;…

数据导出为Excel接口报错:java.io.IOException: UT010029: Stream is closed

在Spring框架中&#xff0c;开发过程中经常需要实现数据的导出功能&#xff0c;尤其是将数据导出为Excel文件。然而&#xff0c;在实现这样的功能时&#xff0c;可能会遇到一些意料之外的错误&#xff0c;比如java.io.IOException: UT010029: Stream is closed。本文将基于一个…

云同步的使用

云同步技术是一种在多个设备或系统之间保持数据一致性的技术&#xff0c;它通常依赖于云存储服务来实现。在Java中&#xff0c;实现云同步功能通常需要与云服务提供商的API进行交互&#xff0c;如Amazon S3、Google Cloud Storage、Microsoft Azure Blob Storage等。 以下是一个…

Web自动化测试实战--博客系统

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;测试&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1.项目效果展示 2.编写web测试用例 3.自动化测试脚本开发 3.1创建空项目 引…

YeAudio音频工具的介绍和使用

夜雨飘零音频工具 这款Python音频处理工具功能强大&#xff0c;支持读取多种格式的音频文件。它不仅能够对音频进行裁剪、添加混响、添加噪声等多种处理操作&#xff0c;还广泛应用于语音识别、语音合成、声音分类以及声纹识别等多个项目领域。 安装 使用pip安装。 pip ins…

设计模式-结构型模式-享元模式

1.享元模式定义 摒弃了在每个对象中保存所有数据的方式&#xff0c;通过共享多个对象所共有的相同状态&#xff0c;从而让我们能在有限的内存容量中载入更多对象&#xff1b; 1.1 享元模式优缺点 优点 极大减少内存中相似或相同对象数量&#xff0c;节约系统资源&#xff0c…

window下kafka3启动多个

准备工作 我们先安装好kafka&#xff0c;并保证启动成功&#xff0c;可参考文章Windows下安装Kafka3-CSDN博客 复制kafka安装文件 kafka3已经内置了zookeeper&#xff0c;所以直接复制就行了 修改zookeeper配置文件 这里我们修改zookeeper配置文件&#xff0c;主要是快照地址…

前端的面试题

Class 与 Style 如何动态绑定&#xff1f; 对象语法&#xff1a; <div v-bind:class"{ active: isActive, text-danger: hasError }"></div> data: {isActive: true,hasError: false }数组语法&#xff1a; <div v-bind:class"[isActive ? acti…

使用tinyxml向xml文件中插入数据

目前已有一个xml文件&#xff0c;内容如下所示。想要在这个文件中间插入一个数据。tinyxml库比较好用。 1.下载tinyxml库文件并添加进工程 在网上下载好tinyxml的库文件&#xff0c;然后放入项目目录中 在qt工程中点击【添加现有文件】&#xff0c;把这6个文件添加进来 2.使…

【WPF】WPF学习之【二】布局学习

WPF布局学习 常用布局Grid网格布局StackPanel 布局CanvasDockPanel布局WrapPanel布局 常用布局 1、StackPanel: 学习如何使用StackPanel进行垂直和水平布局。 2、Grid: 掌握Grid的网格布局技术。 3、Canvas: 了解Canvas的绝对定位布局。 4、DockPanel: 学习DockPanel的停靠…

python基础(15多线程编程介绍)

python系列文章目录 python基础&#xff08;01变量&数据类型&运算符&#xff09; python基础&#xff08;02序列共性&#xff09; python基础(03列表和元组) python基础&#xff08;04字符串&字典&#xff09; python基础&#xff08;05集合set&#xff09; pytho…

滚雪球学MyBatis-Plus(02):环境准备

环境准备 本地开发环境参考如下&#xff1a; 开发工具&#xff1a;IntelliJ IDEA 2021.3.2JDK版本&#xff1a; JDK 1.8Spring Boot版本&#xff1a;2.3.1.RELEASEMaven版本&#xff1a;Apache Maven 3.8.2MySQL&#xff1a;5.6 前言 在上期内容中&#xff0c;我们系统地介绍了…

【UE5】UMG C++父类绑定蓝图子类属性

有时我们在设计UMG时可能会使用到C父类来处理一些通用逻辑&#xff0c;如果我们想要在C父类中获取其派生子类的某个属性&#xff0c;如Image或Button等&#xff0c;我们可以通过使用UE提供的BindWidget元数据标签的方式来获取。 BindWidget BindWidget元数据标签在官方文档中…