Vue学习:创建Vue

news/2024/11/24 13:38:02/

一、安装Node.js和NPM

1.安装node.js

从node.js官网下载并安装node.js  网址: Download | Node.js 

2.双击” node-v8.1.2-x64.msi”开始安装

 

 

 

 

 

 

 

至此Node.js已经安装完成,可以先进行下简单的测试安装是否成功了,后面还要进行环境配置
在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口。

 安装完后的目录如下图所示:

 

注意: npm 版本需要大于 3.0,如果低于此版本需要升级它

##升级npm

cnpm install npm -g

 3.安装NPM

.基于node.js利用淘宝npm镜像安装相关依赖,由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像

npm install -g cnpm --registry= https://registry.npmmirror.com/

完成之后,我们可以用cnpm代替npm来安装依赖包了.

镜像源链接切换

  1. 全局切换镜像源:npm config set registry https://registry.npm.taobao.org
  2. 查看镜像源使用状态:npm get registry 
  3. 全局切换官方镜像源:npm config set registry http://www.npmjs.org 

使用 nrm 切换镜像源

  1. 下载 nrm:npm install -g nrm 
  2. 查看可切换的镜像源: nrm ls (*表示正在使用的镜像源)

* npm ---------- https://registry.npmjs.org/

  yarn --------- https://registry.yarnpkg.com/

  tencent ------ https://mirrors.cloud.tencent.com/npm/

  cnpm --------- https://r.cnpmjs.org/

  taobao ------- https://registry.npmmirror.com/

  npmMirror ---- https://skimdb.npmjs.com/registry/

切换淘宝镜像源:nrm use taobao 

注意:在Linux系统环境里面如果下载nrm后执行nrm ls命令出现未找到命令,需要配置全局的软链接
sudo ln -s /home/nodejs/bin/nrm /usr/local/bin/
其中 /home/nodejs/bin/nrm 是指你本地安装nodejs包的路径。/usr/local/bin/路径是你的程序命令执行路径,相当与Windows系统下的环境变量 PATH 路径,配置后可以在系统的任意位置执行你的命令。

二、安装VueCLI脚手架构工具

安装全局vue-cli脚手架构,用于帮助搭建所需要的模板框架

cnpm  install –g @vue/cli

验证是否安装成功: 使用vue,出现如下信息,说明安装成功:

 

进入到项目目录,

启动项目:

npm run serve

 

安装依赖  注意需要安装git  git的安装自行百度

cd first-project

cnpm install

 

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

 

测试环境是否搭建成功

 npm  run  serve

 在浏览器输入URL “localhost:8080”

 

三、在谷歌浏览器安装检查和调试Vue.js应用工具——VueDevtools

 

 

 

四、创建Vue

1.可视化工具界面方式

 

我之前没试过这个方法,就报错了

 

 vue创建新项目报错“Cannot read properties of undefined (reading ‘indexOf‘)“_aiyouweihei_001的博客-CSDN博客

 

 这样就创建成功了,但是不推荐这个方法,复杂而且很慢,要在管理员运行模式下才可以打开。

2.命令行方式

在终端输入命令行

选择vue3创建即可。

(这种方式比较便捷)


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

相关文章

如何初始化Git仓库

如何将目录初始化为Git仓库 一级目录二级目录三级目录 一、准备1、安装 gh2、登录 二、初始化 Git 仓库 一级目录 二级目录 三级目录 一、准备 ​ 在这里,我们需要借助一个非常好用的工具,大家也可以参照官方文档进行阅读,下面介绍常用的…

IPv4分组

4.3.1 IPv4分组 IP协议定义数据传送的基本单元——IP分组及其确切的数据格式 1. IPv4分组的格式 IPv4分组由首部和数据部分(TCP、UDP段)组成,其中首部分为固定部分(20字节)和可选字段(长度可变&#xff0…

SpringCloud Alibaba——Nacos1.x配置中心长轮询机制

目录 一、Nacos1.x配置中心长轮询机制二、Nacos1.x配置中心长轮询机制流程图解 一、Nacos1.x配置中心长轮询机制 客户端会轮询向服务端发出一个长连接请求,这个长连接最多30s就会超时,服务端收到客户端的请求会先判断当前是否有配置更新,有则…

用Python实现百度AI接口对接,让你的程序更聪明

用Python实现百度AI接口对接,让你的程序更聪明 百度AI接口提供了丰富的人工智能服务,包括图像识别、文字识别、语音识别等功能。通过对接这些接口,我们可以让我们的程序具备更加智能的能力。本文将以Python为例,介绍如何使用百度AI接口实现一些常见的功能。 首先,我们需…

基于Java+SpringBoot+Vue的网吧管理系统设计与实现(源码+LW+部署文档等)

博主介绍: 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序、Python和Android等技术,能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

如何切换goland之中的版本号(升级go 到1.20)

go 安装/版本切换_go 切换版本_云满笔记的博客-CSDN博客 用brew就行: echo export PATH"/opt/homebrew/opt/go1.20/bin:$PATH" >> ~/.zshrc

如何将项目挂后台运行?【nohup和tmux】

挂后台运行,防止霸屏。 线上的程序不会将日志输出到控制台,而是输出到日志文件,方便运维查阅信息。 一.nohup--挂后台运行的命令 //nohup--英文全称no hang up,可以后台运行指定命令 //hello.log是指将日志输出到hello.log文件 …

vue返回上一页并传递参数

需求:从A页面跳转到B页面,从B页面再返回至A页面,并传递参数。 1、使用sessionStorage或者localStorage B页面返回之前将数据放置在sessionStorage里面 sessionStorage.setItem(searchKeyword, JSON.stringify({ fundname: 易方达基金, fun…