安装Vue脚手架

修改NPM全局安装的默认路径(不要轻易操作)

查看当前的全局安装路径

npm config ls

安装指定的目录安装node.js,例如: c:\nodejs

node.js安装完成之后,需要在 c:\node.js 目录下创建两个文件夹:

c:\nodejs\node_global
c:\nodejs\node_cache

文件夹创建成功后,执行命令:

# 配置默认的全局安装路径
npm config set prefix "c:\nodejs\node_global"
npm config set cache "c:\nodejs\node_cache"# 配置默认的镜像
npm config set registry https://registry.npm.taobao.org

执行成功后,再次运行 npm config ls 查看是否配置成功,如果没有问题,将以下两个目录配置到全局系统变量中:

c:\nodejs
c:\nodejs\node_global

以上步骤执行完成后,可以尝试一下是否能安装到指定的目录,例如:

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm 下载完成后,去 c:\nodejs\node_global 目录下查看是否安装成功。

安装Vue-cli脚手架

安装命令:

cnpm i @vue/cli -g

使用脚手架创建项目

先创建管理项目的目录,例如: d:\prject ,目录创建完成后,在该目录下打开命令行工具。

执行:

vue create 项目名

按照以下步骤执行:

第1步:自定义安装还是使用默认安装

第2步:选择安装的模块

第3步:选择Vue的版本,使用2.x

第4步:选择路由模式是否为history模式

第5步:配置文件的类型

第6步:是否将安装流程保存为安装模板

上面步骤执行完成后,依次按回车,会进入下载的步骤。

如果中间没有报错信息,即项目安装成功,然后执行:

# 进入项目
cd myapp# 启动项目
npm run serve

项目启动成功

打开浏览器,在地址栏输入 http://localhost:8080 即可打开项目。

项目结构介绍

- node_modules 依赖管理目录
- public 本地服务器的根目录,用于存放静态文件,例如HTML、css、图片等
- src 源码目录|-- assets 静态资源文件,用于存放图片|-- components 用于管理公共组件的目录|-- router 管理路由的目录|-- store 全局状态管理目录|-- views 视图组件管理目录|-- App.vue 根组件|-- main.js 项目入口文件,用于引入全局依赖或全局配置
- package.json NPM的配置文件

管理路由的目录
|-- store 全局状态管理目录
|-- views 视图组件管理目录
|-- App.vue 根组件
|-- main.js 项目入口文件,用于引入全局依赖或全局配置

  • package.json NPM的配置文件

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

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

相关文章

云服务器ECS使用限制概览,让你的上云少走一些坑

限制概述 使用云服务器ECS有下列限制: 不支持安装虚拟化软件和二次虚拟化(例如安装使用VMware Workstation)。仅弹性裸金属服务器和超级计算集群支持二次虚拟化。不支持声卡应用。不支持直接加载外接硬件设备(如硬件加密狗、U盘…

Tomcat 架构原理解析到架构设计借鉴

来源 | 码哥字节Tomcat 架构原理解析到架构设计借鉴Tomcat 发展这么多年,已经比较成熟稳定。在如今『追新求快』的时代,Tomcat 作为 Java Web 开发必备的工具似乎变成了『熟悉的陌生人』,难道说如今就没有必要深入学习它了么?学习…

vue2 父子组件传参 回调函数使用

关键点: 父组件给子组件动态传参使用v-bind:属性key(多个单词用下划线拼接) 子组件接收父组件传参参数使用 props标签,属性key多个单词用驼峰形式拼接) 子组件定义回调父组件函数 子组件: v-on:change&quo…

“智慧停车+智慧交通”提高市民出行效率和体验

公司介绍 我们是一家智慧停车公司,专注于专业停车场技术研发以及技术服务。主营业务是专业停车场技术研发。 我们公司提出先进的“智慧停车智能交通”解决方案,以大数据平台架构、人工智能技术及软硬件集成融合,通过产品技术创新与商业模式创…

@webservice报错org.apache.cxf.common.i18n.UncheckedException: No operation was found with

文章目录1. 现象2. 解决办法13. 解决办法21. 现象 整合springcxf的webservice,成功发布了wsdl,但在调用的时候报错 org.apache.cxf.common.i18n.UncheckedException: No operation was found with; 2. 解决办法1 : 在service接口中添加targetNamespace package com.gblfy.s…

js判断一个字符串 是否存在在另一个字符串

vue项目中判断当前页面是否存在某个动态路由路径 let title that.$route.path; //获取当前路由路径 let routerStr that.$store.state.route_url; //某个动态路由 function isContains(title, routerStr) { return title.indexOf(routerStr) > 0; } console.log(isConta…

“校园安全+教务管理+家校互动+教育大数据”创造安全的家校生态环境

公司介绍 我们主营业务为线上教育,旨在开创“物联网校园安全教务管理学习资源家校互动教育大数据”业务模式,创造更加安全和谐的家校生态环境。我们公司需要参照国外总公司系统开发一套国内业务系统。 客户痛点 我们作为国内新注册的公司,对未…

Web 前端,易学难精,没有拿手的实战项目,怎么办?

今年受经济下行与疫情叠加的影响,毕业生有800多万,就业形势十分严峻,但即便如此,Web 前端人才在软件开发行业的就业市场中依旧供小于求,目前,全国总缺口每年大约为近百万人。行业对前端需求量持续增加&…

快速入门容器服务,创建Kubernetes集群

使用须知 创建集群过程中,容器服务会进行如下操作: 创建 ECS,配置管理节点到其他节点的 SSH 的公钥登录,通过 CloudInit 安装配置 Kubernetes 集群。 创建安全组,该安全组允许 VPC 入方向全部 ICMP 端口的访问。 如果…

spring5.x cxf3.4.x 服务端和客户端 非maven版本

文章目录一、资料准备1. 官网链接2. 解压3. 依赖梳理二、spring集成cxf2.1.创建spring项目2.2. 创建接口2.3. impl2.4. spring-cxf.xml2.5. 客户端2.6. 开源项目一、资料准备 1. 官网链接 http://cxf.apache.org/download.html 下载apache-cxf-3.4.5.zip 2. 解压 3. 依赖梳…

Vue导航点击路由跳转后样式不变

Vue导航点击路由跳转后样式不变 <template><ul><li :class"{active:isActive1}" click"myOrder(1)">统计分析</li><li :class"{active:isActive2}" click"myOrder(2)">订单中心</li><li :cla…

2019年中国IaaS公有云市场排名及份额出炉

来源 | 艾瑞咨询随着政府、企业的数字化转型如火如荼地推进&#xff0c;云服务作为国家数字经济产业的“基座”&#xff0c;正日益彰显出其重要的战略意义。尽管基础算力和网络的供给已较为充分&#xff0c;但云服务正在使这些IT基础资源更加普惠化&#xff0c;让数字红利流向…

专有网络(VPC)的六大应用场景

专有网络&#xff08;VPC&#xff09;是完全隔离的网络环境&#xff0c;配置灵活&#xff0c;可满足不同的应用场景。 托管应用程序 您可以将对外提供服务的应用程序托管在VPC中&#xff0c;并且可以通过创建安全组规则、访问控制白名单等方式控制Internet访问。您也可以在应用…

应用配置管理ACM 使用场景快速入门

本文以一个例子介绍了如何使用 ACM 的命名空间&#xff08;Namespace&#xff09;功能&#xff0c;为应用在测试、预生产和生产环境下的同一个配置设置不同的值。 背景信息 在本示例任务中&#xff0c;我们将使用 ACM 的命名空间&#xff08;Namespace&#xff09;功能&#xf…

cxf javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)

文章目录1. 现象2. 解决方案13. 解决方案21. 现象 CXF 在和xercesImpl.jar冲突的时候&#xff0c;抱错javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z); 2. 解决方案1 将xercesImpl.jar替换xercesImpl:2.9.1就可以了 maven集成坐标 <depend…

vue切换css样式

vue通过点击控制多个元素的css样式 <div class"hide-class" v-for"(item,index) in list" :class"{activeClass: rSelect.indexOf(item)!-1}" click"showdifference(item,index)" ><div class"c…

三本毕业!入职华为!年薪200万!他凭什么?

前几天&#xff0c;华为第二批“天才少年”入选名单更新了&#xff0c;随之登上知乎的是这样一个热搜&#xff1a;“如何看待武昌理工学院2009级本科生张霁入选华为“天才少年“计划并且年薪位于最高档&#xff1f;”从三本到年薪200万的高薪offer&#xff0c;张同学堪称是读书…

利用云数据库 MongoDB ,为你的业务创建单节点实例

本文以一个例子介绍了如何使用 ACM 的命名空间&#xff08;Namespace&#xff09;功能&#xff0c;为应用在测试、预生产和生产环境下的同一个配置设置不同的值。 背景信息 在本示例任务中&#xff0c;我们将使用 ACM 的命名空间&#xff08;Namespace&#xff09;功能&#xf…

java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion

java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion问题解决方法,导致本文问题的原因是缺少一个xerces.jar 包 maven集成坐标 <dependency><groupId>xerces</groupId><artifactId>xercesImpl</artifactId><…

互联网、电商及游戏行业实时BI分析方案

场景描述 本文以电商行业为例&#xff0c;将业务数据和日志数据同步到ADB&#xff0c;之后通过Quick BI做实时可视化分析。相对于传统的关系型数据库&#xff0c;阿里云分析型数据库MySQL版只需要几毫秒的时间&#xff0c;即可查询PB级数据并从中找到匹配信息。 解决问题 互联…