vue详细安装教程

这里写目录标题

  • 一、下载和安装node
  • 二、创建全局安装目录和缓存日志目录
  • 三、安装vue
  • 四、创建一个应用程序
  • 五、3x版本创建
  • 六、创建一个案例

一、下载和安装node

官网下载地址:https://nodejs.org/en/download

在这里插入图片描述
选择适合自己的版本,推荐LTS,长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后,双击下载的安装包。安装node(步骤省略,一路next即可)
安装完成后,检查一下是否安装成功。

node -v
npm -v

在这里插入图片描述


输出了版本号就说明安装成功了。

二、创建全局安装目录和缓存日志目录

在我们的安装目录下,创建名为node_cache和node_global的两个文件夹。
在这里插入图片描述


打开Dos窗口,执行如下命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix “你的安装目录\node_global”
npm config set cache “你的安装目录\node_cache”

在这里插入图片描述
为了以后下载包快速,修改源为淘宝镜像

npm config set registry https://registry.npm.taobao.org

在这里插入图片描述

查看npm配置修改是否成功

npm config list

三、安装vue

用管理员身份运行!
Win + s 搜索 “命令提示符”,右键以管理员身份运行

安装vue.js

npm install vue -g

其中-g是全局安装,指安装到global全局目录去,如果不加-g,模块就会安装到当前路径下的node_modules文件夹下,没有目录则自动创建。

安装webpack模板

npm install webpack -g

安装打包的客户端

npm install webpack-cli -g

输入 webpack -v,能输出版本号就说明都安装好了

安装脚手架vue-cli

npm install vue-cli -g

输入vue --version,能输出版本号就说明安装好了。

四、创建一个应用程序

这两个用哪个都行

 vue init webpack 项目名vue create 项目名

在这里插入图片描述

创建好后执行蓝色提示命令运行项目

 $ cd vuetest     # 进入项目命名的目录$ npm run serve  # 运行项目

在这里插入图片描述
在这里插入图片描述
使用空格选择或者去除然后回车
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

五、3x版本创建

Default 表示使用默认配置
Manually 自定义勾选特性配置

在这里插入图片描述

自定义选择要安装的插件。( 按空格是选择勾还是不勾,按回车是代表确认)

在这里插入图片描述

选择vue的版本
在这里插入图片描述
选择css预处理语言 ,勾选 Less
在这里插入图片描述
选择代码格式校验使用哪种校验规范 一般用第三种
ESLint + Standard config 通用规范
ESLint + Prettier 比较漂亮的规范
在这里插入图片描述
选择什么情况下触发代码校验,按空格表示勾选,全选然后回车
Lint on save 当修改报错文件时触发
Lint and fix on commit 当执行git committ提交时
在这里插入图片描述
对应Babel, ESLint等配置文件是
In dedicated config files 生成保存到独立的配置文件中
In package.json 把插件的配置信息和package.json文件写在一起
在这里插入图片描述

六、创建一个案例

app.vue

<template><div id="app"><Home></Home></div>
</template><script>import Home from "@/components/Home";export default {name: 'App',components: {Home}}
</script><style>#app {height: 100%;}</style>

在components下创建Home

<template><div id="app"><h1>首页</h1></div>
</template><script>export default {name: 'App',}
</script>

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

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

相关文章

【计算机网络】计算机网络中的基本概念

文章目录 局域网LAN基于网线直连基于集线器组建基于交换机组建基于交换机和路由器组建 广域网WANIP地址端口号协议为什么要有协议知名协议的默认端口 五元组协议分层TCP/IP五层模型封装和分用 网络互连就是将多台计算机连接在一起&#xff0c;完成数据共享。数据共享本质是网络…

C++设计模式_23_Command 命令模式

我们将Command 和Visitor归为“行为变化”模式。 Command 命令模式与函数对象十分类似&#xff0c;但在C主流框架中&#xff0c;函数对象&#xff08;function object&#xff09;应用的更为广泛。 文章目录 1. “行为变化”模式1.1 典型模式 2. 动机( Motivation )3. 模式定义…

【Leetcode】【消失的数字】【C语言】

方法一&#xff1a;按位异或&#xff08;找单身狗&#xff09; 我们知道&#xff1a;按位异或^操作原则&#xff1a;相同为零&#xff0c;相异为一 所以 0^aa a ^a0 a ^bb ^a int missingNumber(int* nums, int numsSize){ int i 0; int tem1 0,tem20; for (i 0;i < nu…

大厂面试题-介绍一下自己对Netty

目录 用三点来简单的介绍下Netty&#xff1a; 面试官&#xff1a;哦&#xff0c;还不错&#xff0c;那你在说说为什么要用Netty&#xff1f; 面试官&#xff1a;那你在通俗地说一下Netty可以做什么事情&#xff1f; 面试官&#xff1a;那&#xff0c;在说说Netty有几种线程…

XUbuntu22.04之simplenote支持的Markdown语法总结(一百九十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

linux下df -h 命令一直卡住的解决方法

在Linux中&#xff0c;偶尔遇到用 df -h 查看磁盘情况时&#xff0c;一直卡住无法显示结果。 解决方法&#xff1a; 1、首先使用strace追踪到底执行到哪里卡住 $ strace df -h 2、如果没有strace命令则进行安装 $ yum install strace -y 3、显示出卡住的地方&#xff0c;如…

SpringBoot源码透彻解析—bean生命周期

先跟一段debug再看总结&#xff1a; 1 创建实例 InstantiationAwareBeanPostProcessor.postProcessBeforeInstantiation&#xff08;自定义一个对象或者代理对象&#xff09;createBeanInstance&#xff08;创建实例&#xff09;MergedBeanDefinitionPostProcessor.postProcess…

编程怎么学才高效?初学编程怎么样才容易入门?

学习编程并提高编程能力需要一种结构化的方法&#xff0c;其中包括理解基础概念、实践、反馈和持续学习。以下是一些高效学习编程的策略&#xff1a; 理解基础概念&#xff1a;在学习编程的初期&#xff0c;理解基础概念非常重要。这包括学习编程语言的基本语法、数据类型、控…

Java调用HTTPS接口,绕过SSL认证

1&#xff1a;说明 网络编程中&#xff0c;HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是一种通过加密的方式在计算机网络上进行安全通信的协议。网络传输协议&#xff0c;跟http相比更安全&#xff0c;因为他加上了SSL/TLS协议来加密通信内容。 Java调…

算法与数据结构-分治算法

文章目录 什么是分治算法分治算法应用举例分析分治思想在海量数据处理中的应用 什么是分治算法 分治算法&#xff08;divide and conquer&#xff09;的核心思想其实就是四个字&#xff0c;分而治之 &#xff0c;也就是将原问题划分成 n 个规模较小&#xff0c;并且结构与原问…

JavaEE入门介绍,HTTP协议介绍,常用状态码及含义,服务器介绍(软件服务器、云服务器)

一、JavaEE入门 JavaEE&#xff08;Java Enterprise Edition&#xff09;&#xff0c;Java企业版&#xff0c;是一个用于企业级web开发&#xff08;不需要使用控制台&#xff09;平台。最早由Sun公司定制并发布&#xff0c;后由Oracle负责维护。 JavaEE平台规范了在开发企业级w…

3D RPG Course | Core 学习日记三:Navigation智能导航地图烘焙

前言 前面我们已经绘制好了一个简单的地图场景&#xff0c;现在我们需要使用Navigation给地图做智能导航&#xff0c;以实现AI自动寻路&#xff0c;以及设置地图的可行走区域以及不可行走区域&#xff0c;Navigation的基础知识、原理、用法在Unity的官方文档&#xff0c;以及网…

cocos creator,vscode打开脚本报错,找不到cc模块问题

cocosCreator&#xff0c;用VSCODE打开写脚本代码的时候&#xff0c;会误报飘红&#xff0c;但实际上能正常运行。 我的版本是当前最新版本的3.8.1 解决方案: 在CocosCreator 的安装目录下 C:\ProgramData\cocos\editors\Creator\3.8.1\resources\resources\3d\engine\bin.dec…

人工智能AI 全栈体系(十一)

第一章 神经网络是如何实现的 这些神经网络越来越复杂&#xff0c;都是用BP算法求解。网络有些变化就可能需要重新推导&#xff0c;而在实验过程中可能会做很多尝试&#xff0c;这样每次都重新推导BP算法太麻烦了。 十、深度学习框架 现在有了很多深度学习框架&#xff0c;这…

OPENCV 闭运算实验示例代码morphologyEx()函数

void CrelaxMyFriendDlg::OnBnClickedOk() {hdc this->GetDC()->GetSafeHdc();// TODO: 在此添加控件通知处理程序代码string imAddr "c:/Users/actorsun/Pictures/";string imAddr1 imAddr"rice.png";Mat relax, positive;relax imread(imAddr1…

【机器学习】二、决策树

目录 一、决策树定义&#xff1a; 二、决策树特征选择 2.1 特征选择问题 2.2 信息增益 2.2.1 熵 2.2.2 信息增益 三、决策树的生成 3.1 ID3算法 3.1.1理论推导 3.1.2代码实现 3.2 C4.5 算法 3.2.1理论推导 ​ 3.2.2代码实现 四、决策树的剪枝 4.1 原理 4.2 算法思路&#xff1a…

css position属性与js滚动

“视口”就是浏览器窗口中实际显示文档内容的区域&#xff0c;不包含浏览器的“外框”&#xff0c;如菜单、工具条和标签。文档则是指整个网页。 1 css 的position static 正常定位&#xff0c;是元素position属性的默认值&#xff0c;元素遵循常规流。 relative 相对定位&…

如何卸载干净 IDEA(图文讲解)windows和Mac教程

大家好&#xff0c;我是sun~ 很多小伙伴会问 Windows / Mac 系统上要怎么彻底卸载 IDEA 呢&#xff1f; 本文通过图片文字&#xff0c;详细讲解具体步骤&#xff1a; 如何卸载干净 IDEA&#xff08;图文讲解&#xff09; Windows1、卸载 IDEA 程序2、注册表清理3、残留清理 M…

云安全-云原生基于容器漏洞的逃逸自动化手法(CDK check)

0x00 docker逃逸的方法种类 1、不安全的配置&#xff1a; 容器危险挂载&#xff08;挂载procfs&#xff0c;Scoket&#xff09; 特权模式启动的提权&#xff08;privileged&#xff09; 2、docker容器自身的漏洞 3、linux系统内核漏洞 这里参考Twiki的云安全博客&#xff0c;下…

查询平均提速 700%,奇安信基于 Apache Doris 升级日志安全分析系统

本文导读&#xff1a; 数智时代的到来使网络安全成为了不可忽视的重要领域。奇安信作为一家领先的网络安全解决方案领军者&#xff0c;致力于为企业提供先进全面的网络安全保护&#xff0c;其日志分析系统在网络安全中发挥着关键作用&#xff0c;通过对运行日志数据的深入分析…