Vue2.0的安装

1.首先查看是否已经安装了node.js

选择以管理员方式打开命令提示符(权限较高),或者通过cmd的方式打开

打开后输入node -v 查看自己电脑是否安装node,以及版本号

node -v

如果没有的话,请查看Node.js的安装

2.Vue和脚手架安装

安装vue.js

一般是全局安装,-g是全局安装,指安装到global全局目录去。

如果安装3.0版本的可以选择这个命令(二选一,根据自己的淘宝镜像源设置选择)

npm install vue -gcnpm install vue -g

需要版本为2.0版本的,使用这个命令:

npm install -g @vue/cli

查看安装的vue信息npm info vue 或者cnpm info vue,不过我最常用vue -V
查看安装的vue版本    npm list vue

安装webpack模板

运行命令 npm install webpack -g

npm install webpack -g 

webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,
所以还需要安装webpack-cli:npm install --global webpack-cli

npm install --global webpack-cli

 安装成功后可使用webpack -v查看版本号。

安装vue-router

npm install -g vue-router

3. 创建项目

1、命令创建项目

(最好在cd到D盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd)

 vue init webpack 项目名

项目名不要取中文和大写字母。

进行一些配置:

  • Project name(工程名):回车(含大写字母给我报错了,我给改了my-vue)
  • Project description(工程介绍):回车
  • Author:作者名 :回车
  • Vue build ==> (是否安装编译器)runtime-compiler、 runtime-only 都是打包方式,第二个效率更高;
  • Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到路由,所以Y 回车;
  • Use ESLint to lint your code ==> 是否需要ESLint检测代码,目前我们不需要所以 n 回车;
  • Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
  • Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车;
  • Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
  • 回车;

2.项目仪表盘创建项目

切到项目创建的文件位置

vue ui

3.打包上线

编写好程序后可以打包给后端,然后上线。

npm run buildnpm run build:prod

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3341.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL Server 导入Excel数据

1、选中指定要导入到哪个数据库,右键选择 》任务 》导入数据 2、数据源 选择Excel,点击 下一步(Next) 3、目前 选择OLE DB Provider ,点击 下一步(Next) 4、默认 ,点击 下一步(Next)…

迅为RK3576开发板Android 多屏显示

迅为iTOP-3576开发板采用瑞芯微RK3576高性能、低功耗的应用处理芯片,集成了4个Cortex-A72和4个Cortex-A53核心,以及独立的NEON协处理器。它适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品。 1.1 Android 多屏同显 iTOP-RK3576 开发板支持…

如何保证光谱相机的稳定性和可靠性

光学系统设计与制造 高质量光学元件:采用高精度研磨和镀膜的透镜、棱镜、光栅等光学元件。优质的透镜可以减少像差和色差,确保光线准确聚焦;高质量的镀膜能够提高光学元件的透光率,降低反射损失,并且增强对不同波段光…

Python GUI Pyside6 实例笔记

例【1】 好的!我们将通过一个简单的案例来学习如何使用 PySide6 创建一个基本的桌面应用程序。这个案例将展示如何创建一个带有按钮的窗口,当点击按钮时,会弹出一个消息框。 1. 安装 PySide6 首先,确保你已经安装了 PySide6。如…

CIA-Access V2.5_9_2_10G EPON技术原理_关键技术

10G EPON关键技术,主要包含测距,突发光电技术,DBA以及线路加密。 关键技术之MPCP测距 第一个仍然是测距,每一个ONU到OLT的逻辑距离是不相等的,另外OLT与ONU之间的环路时间也会随着时间和环境的变化而变化,…

PDF文件提取开源工具调研总结

概述 PDF是一种日常工作中广泛使用的跨平台文档格式,常常包含丰富的内容:包括文本、图表、表格、公式、图像。在现代信息处理工作流中发挥了重要的作用,尤其是RAG项目中,通过将非结构化数据转化为结构化和可访问的信息&#xff0…

计算机网络 (43)万维网WWW

前言 万维网(World Wide Web,WWW)是Internet上集文本、声音、动画、视频等多种媒体信息于一身的信息服务系统。 一、基本概念与组成 定义:万维网是一个分布式、联机式的信息存储空间,通过超文本链接的方式将分散的信息…

ubuntu18.04开发环境下samba服务器的搭建

嵌入式linux的发展很快,最近准备在一个新项目上采用新一代的linux核心板,发现linux内核的版本已经更新到5.4以上甚至6.0以上;之前常用的linux内核版本是2.6.4,虽然在某些项目上还能用但是明显跟不上时代的步伐了,所以要…

HTML5+Canvas实现的鼠标跟随自定义发光线条源码

源码介绍 HTML5Canvas实现的鼠标跟随自定义发光线条特效源码非常炫酷&#xff0c;在黑色的背景中&#xff0c;鼠标滑过即产生彩色变换的发光线条效果&#xff0c;且线条周围散发出火花飞射四溅的粒子光点特效。 效果预览 源码如下 <!DOCTYPE html PUBLIC "-//W3C//D…

【论文阅读】基于空间相关性与Stacking集成学习的风电功率预测方法

文章目录 摘要0. 引言1. 空间相关性分析2. 风电功率预测模型2.1 Stacking 集成策略2.2 基学习器2.2.1 基于机器学习算法的基学习器2.2.2 基于神经网络的基学习器2.2.3 基于粒子群优化算法的超参数优化 2.3 元学习器2.4 基于空间相关性与Stacking集成学习的风电功率预测方法 3 算…

GMM高斯混合聚类算法(Matlab)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GMM高斯混合聚类算法 matlab2023b语言&#xff0c;一键出图&#xff0c;直接运行 1.代码注释清晰&#xff0c;自行解读容易。 2…输出图例如图所示包括&#xff1a;聚类图(聚类结果图)&#xff0c;协方差矩阵类型…

LabVIEW实车四轮轮速信号再现系统

开发了一个基于LabVIEW的实车四轮轮速信号再现系统。该系统解决现有电机驱动传感器成本高、重复性差、真实性差和精度低等问题&#xff0c;提供一种高精度、低成本的轮速信号再现解决方案。 项目背景 ABS轮速传感器在现代汽车安全系统中发挥着至关重要的作用。为保证其准确性和…

计算机网络常见协议

目录 OSPF(Open Shortest Path First) NAT(Network Address Translation) ICMP (Internet Control Message Protocol) HTTPS&#xff08;SSL/TLS加密&#xff09; HTTPS协议 1. 对称加密 2. 非对称加密 3. 证书验证 4. 回顾https协议传输流程 HTTP TCP UDP 1. TCP&a…

算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集)

算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集) 目录 算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集)FashionMINIST 图像分类原理解析1. 全连接的原理图2. 背景介绍3.引入相关库函数4. 数据预处理5. 模型设计6. 初始化网络&#xff0c;损失函数与…

单元测试与unittest框架

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 单元测试的定义 1. 什么是单元测试&#xff1f; 单元测试是指&#xff0c;对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&am…

【Hugging Face】下载开源大模型步骤

Mac M1 1、国内镜像站 模型基本都可以在国内镜像站 https://hf-mirror.com/ 下载。 部分 Gated Repo 需登录申请许可&#xff0c;需先前往 Hugging Face 官网登录、申请许可&#xff0c;在官网这里获取 Access Token 后回镜像站用命令行下载。 2、注册登陆 Hugging Face 2.1…

STM32的集成开发环境STM32CubeIDE安装

STM32CubeIDE - STM32的集成开发环境 - 意法半导体STMicroelectronics

.Net8 Avalonia跨平台UI框架——<vlc:VideoView>控件播放海康监控、摄像机视频(Windows / Linux)

一、UI效果 二、新建用户控件&#xff1a;VideoViewControl.axaml 需引用&#xff1a;VideoLAN.LibVLC.Windows包 Linux平台需安装&#xff1a;VLC 和 LibVLC &#xff08;sudo apt-get update、sudo apt-get install vlc libvlccore-dev libvlc-dev&#xff09; .axaml 代码 注…

51.WPF应用加图标指南 C#例子 WPF例子

完整步骤&#xff1a; 先使用文心一言生成一个图标如左边使用Windows图片编辑器编辑&#xff0c;去除背景使用正方形&#xff0c;放大图片使图标铺满图片使用格式工程转换为ico格式&#xff0c;分辨率为最大 在资源管理器中右键项目添加ico类型图片到项目里图片属性设置为始终…

C++(二十一)

前言&#xff1a; 本文承接上文&#xff0c;将详细讲解指针概念。 一&#xff0c;通过指针了解变量的数值。 在将变量地址存入指针后&#xff0c;从指针反推也可以知道原变量的值&#xff0c;若想进行反退&#xff0c;就需要使用间接引用运算符&#xff1a;*。 语法&#x…