【VUE】vue安装教程

2023-11-18

 vue.js环境搭建:

  1. 安装node.js   

  官网地址: https://nodejs.org/en/   (最好安装最新版的node.js)

2. 安装node.js

注意:在安装Node.js前,先cmd(命令提示符)运行“node–v”查看是否已经有Node.js版本,若有,则请先卸载或删除。

Node.js安装过程简单,按照提示点“Next”并选择安装位置即可(建议不装系统盘)

3. npm安装

打开cmd,进行安装,此处选择淘宝NPM镜像下载安装(因为淘宝NPM镜像是国产的,更快,没有别的原因,想了解详情请看https://npm.taobao.org/):

输入命令:npm install -g cnpm  --registry=https://registry.npm.taobao.org     -g 代表全局安装

安装成功以后检查一下版本就可以使用cnpm了      cnpm -v 、node -v

4. vue-cli安装

命令行为cnpm install -g vue-cli

 5. 查看vue信息

 6. 创建项目

创建一个文件夹,如:MyVue文件夹,并用cmd命令行进入此文件夹下(cd D:\workspace_webstorm\web-cus-vue)

创建项目,命令:vue init webpack my-vue

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

具体操作情况如下

//vue-cli2.x.x 版本 安装指定版本
//所有版本安装,前提是已经全局安装过node 和 全局安装过webpack
//
//npm install -g vue-cli@2.x.x  
//vue-cli2.x.x 版本卸载
//
//npm uninstall -g vue-cli
//
//vue-cli3.x.x 版本安装
//3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
//
//npm install -g @vue/cli
//
//vue-cli3.x.x 版本卸载
//
//npm uninstall -g @vue/cli
//
//全局安装 vue-cli
//
//npm install --global vue-cli
//
//创建一个基于webpack模板的新项目
//
//vue init webpack my-project
//
//接下来会有这些问题出现
//Project name项目名称(确定按enter,否按N) (按enter)
//
//Project description (A Vue.js project);项目描述(一vue.js项目)。(随意输入一段简短介绍,不
//
//写直接回车也行)(按enter)
//
//Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N)(按enter)
//
//Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: 
//
//about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in 
//
//.vue files - render functions are required elsewhere;Vue公司的建立(使用箭头键)>运行时+编
//
//译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染
//
//功能是必需的其他地方。(按enter)
//
//
//Install vue-router? (Y/n);安装的路由?(Y/ n)。(可安可不安,建议安装,因为项目肯定能用上) 
//
//(选Y)
//
//Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ n)。(使用ESLint语法,就要做好心理
//
//准备,除非你非常懂ESLint语法,要不就会处处报错,建议N) (选N)
//
//Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / n)。(选N)
//
//Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / n)。(选N)
//
//should we run ‘npm install’ for you after the ogject has been created? ;(选择Yes,use 
//
//NPM)(按enter)
//
//安装依赖
//
//cd my-project
//
//npm install
//
//npm run dev

7. 运行项目

接着打开浏览器访问:http://localhost:8080输入上述网址 

è¿éåå¾çæè¿°

然后打开文件夹就会发现以下这些文件夹,但是这些文件夹都是干啥的嘞? 接着往下看

vue目录简介

build	项目构建(webpack)相关代码
config	配置目录,包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js: 项目的核心文件。
static	静态资源目录,如图片、字体等。
test	初始测试目录,可删除
.xxxx文件	这些是一些配置文件,包括语法配置,git配置等。
index.html	首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档,markdown 格式

8. 总结多练多记总没坏处的,不要像我之前没记住这些操作到现在还是没有记住。创建的时候报错还要百度、查博客。我太难了!

 

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

【VUE】vue安装教程 的相关文章

  • 【windows11】python安装教程(超简易·免配置)

    废话不多说 直接上流程 一 下载python 认准官方网址 http www python org 由于是国外平台网站 网页加载可能有些慢 可以耐心等待 鼠标光标移至 Downloads 处 点击 All releases 若想体验最新版
  • Libvirt安装

    目录 建立在上一章的基础上 一 Libvirt安装与配置 1 修改 etc selinux config 文件 2 配置yum源为阿里源 3 清理yum源 4 重新生成新缓存 5 检查系统是否安装 libvirt qemu 6 检查kvm模
  • 【华为OD统一考试A卷

    华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一修改为OD统一考试 A卷 和OD统一考试 B卷 你收到的链接上面会标注A卷还是B卷 请注意 根据反馈 目前大部分收到的都是
  • Linux磁盘管理

    lsblk 使用lsblk命令可以以tree的形式展示所有设备的信息 lsblk命令的英文是 list block 即用于列出所有可用块设备的信息 而且还能显示他们之间的依赖关系 但是它不会列出RAM盘的信息 使用者权限 所有用户 语法格式

随机推荐

  • HCNP路由交换笔记

    路由基础 路由 在报文转发的过程中沿途的网络设备收到该报文后 会根据其携带的目的IP地址来判断如何转发这个报文 最终将报文从恰当的接口转发出去 当一台路由器收到一个IP报文后 会在自己的路由器中执行路由查询 寻找匹配报文的目的IP地址的路由
  • 如何更改vue项目中的小图标

    1 先将icon图标放入static文件夹中 2 然后在index html文件中引入 3 保存后刷新浏览器就可以显示图标了
  • 如何开启esxi主机的ssh远程连接

    环境 esxi主机 说明 esxi主机默认ssh是不开启的 需要人工手动启动 也可以设置同esxi主机一起开机启动 1 找到esxi主机 点击 配置 那里 再点击右边的属性 如图所示 2 在 服务属性 界面中 可以看到很多服务 找到 SSH
  • navicat mysql data transfer_Navicat 导出导入数据库的实现方法

    描述 把mysql数据库中的一个数据库导出 备份 或者传输给别人 导出 使用Navicat连接到mysql 然后选中你要导出的数据库 右键 选择转储SQL文件 命名为数据名 sql 保存到本地中即可 如下图 选择转储SQL文件 保存到本地
  • Python中configparser的使用

    1 configparser介绍 configparser是python自带的配置参数解析器 可以用于解析 ini文件中的配置参数 ini文件中由sections 节点 key value组成 2 ini文件配置说明 DEFAULT key
  • 华为OD机试 - 用户调度问题(Java)

    题目描述 在通信系统中 一个常见的问题是对用户进行不同策略的调度 会得到不同的系统消耗和性能 假设当前有n个待串行调度用户 每个用户可以使用A B C三种不同的调度策略 不同的策略会消耗不同的系统资源 请你根据如下规则进行用户调度 并返回总
  • 数字化时代-17:从中国历年五年规划后的GDP增长看中美大碰撞的必然

    前言 本文通过观察中国历年五年规划后的GDP增长与美国同期GDP的增长的关系 展示中美大碰撞的必然性 这是中国崛起路上必然要经过的一道坎 无法回避 能做的就是降低它的负面影响 我们先看一下日美大碰撞 在上图中 上个世纪80年代 日本经济飞速
  • 2003服务器iis网站在哪,【搭建网站】Windows2003系统iis搭建网站教程

    1 开始 管理工具 internet信息服务 iis 管理右键添加到桌面快捷方式 然后打开如图 2 右键点击网站 选择新建 网站 3 输入网址描述 并下一步 4 填写网址相关信息 网站ip地址 可以选择全部未分配也选择本机的ip地址 建议使
  • (已上岸)记一次Java后台实习面试问题——附答案

    2020年6月5日 某互联网公司的 Java开发实习生 技术面二面 面试官 自我介绍 项目提了一嘴 JDK 1 8 集合源码 TCP细节 HTTP和HTTPS redis数据结构和常用方法 消息队列基础 Spring SpringCloud
  • mybatis-plus代码生成器一键生成代码

    第一步 添加依赖
  • AI视频成工具D-ID介绍(AI数字人常用工具)

    Studio D id 一个AI视频成工具 用AI创作的数字人 输入人物关键词就可一键生成人物 上传要说的文本或音频则可以开口说话了 关于AI语音 有很多选项可供选择 目前 Studio D id支持多达66种语言 然后 您可以使用普通话
  • 【读点论文】ViTGAN: Training GANs with Vision Transformers 将视觉transformer和gan结合起来

    ViTGAN Training GANs with Vision Transformers Abstract 最近 Vision Transformers vits 在图像识别方面表现出了具有竞争力的性能 需要较少的视觉特定的归纳偏差 在本
  • ubuntu中USB摄像头gstreamer方式图像采集、显示、录像及回放功能设计——(1)

    文章目录 背景 一 USB摄像头图像格式 1 安装v4l2 ctl库 2 找到挂载节点 3 图像格式分析 二 Gstreamer 简介 三 Gstreamer 命令行 1 显示MJPG格式 1280 720 30fps视频 2 显示YUV格
  • Android studio 查找所有字符串

    查找程序中所有直接使用的硬编码字符串 String 全局查找 Ctrl H 输入 u4e00 u9fa5 并打钩Regular Expression 正则表达式
  • 语音识别-3

    https zhuanlan zhihu com p 33464788 基于CTC的语音识别基础与实现 首先明确语音识别的任务是怎样的 输入input是音频wav文件 保存的一般是经过抽样量化编码之后数字信号 也就是每个样点的值 即我们经常
  • Python人工智能需要学什么?Python人工智能有什么用

    python人工智能是python开发中最火也是学习要求最高 薪资最高的方向 所以很多的小伙伴都想知道学习python人工智能要学一些什么 python人工智能有什么用 这篇文章会介绍python人工智能的全学习路线和作用 一起看看吧 一
  • 获取京东cookie简单暴力获取京东CK

    获取京东cookie简单暴力获取京东CK 具有时效性 太久没玩可能以失效 注意 用浏览器请使用隐身窗口 如果多个账号 一定不要点退出登录 直接关闭网页 清除浏览器cookie数据 隐身窗口无需这一步 重新进入网页登录下一个账号 退出会导致刚
  • SpringBoot通过@Cacheable实现redis缓存机制

    SpringBoot通过注解实现redis缓存机制 Cacheable 查询 CachePut 修改 CacheEvict 删除 下面展示一些 内联代码片 Cacheable 查询 An highlighted block key 这边以d
  • 转虚拟服务器要输入什么,虚拟主机转移到云服务器要注意哪些

    虚拟主机转移到云服务器要注意哪些 发布时间 2020 10 09 17 08 53 来源 亿速云 阅读 62 作者 Leah 栏目 云计算 虚拟主机转移到云服务器要注意哪些 针对这个问题 这篇文章详细介绍了相对应的分析和解答 希望可以帮助更
  • 【VUE】vue安装教程

    vue js环境搭建 1 安装node js 官网地址 https nodejs org en 最好安装最新版的node js 2 安装node js 注意 在安装Node js前 先cmd 命令提示符 运行 node v 查看是否已经有N