0

0

怎么安装vue.js

藏色散人

藏色散人

发布时间:2020-11-23 11:10:13

|

10203人浏览过

|

来源于php中文网

原创

安装vue.js的方法:首先从【node.js】官网下载并安装node;然后在命令行运行命令“npm install -g vue-cli”安装vue cli脚手架构建工具;最后在项目目录中,运行命令“npm run dev”即可。

怎么安装vue.js

推荐:《vue教程

本教程操作环境:windows7系统、Vue3版,该方法适用于所有品牌电脑。

安装vue.js的方法:

1.安装node.js
从node.js官网下载并安装node
在这里插入图片描述
安装过程很简单,一直点下一步就ok了。
1.1我们通过打开命令行工具(win+R),输入node -v查看node的版本,若出现相应的版本号说明你安装成功了在这里插入图片描述
1.2.npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。
在这里插入图片描述
现在node环境已经安装完成了,npm包管理器也有了,听说由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm(淘宝的镜像)
2.安装cnpm
在命令行中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:
在这里插入图片描述
完成之后,我们就可以用cnpm代替npm来安装依赖包了。

立即学习前端免费学习笔记(深入)”;

3.安装vue-cli脚手架构建工具
在命令行运行命令npm install -g vue-cli 然后等待安装完成。如下图:

在这里插入图片描述
通过以上三个步骤,我们所需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

首先我们要选择存放项目的位置(在这里我就进入E盘了,你也可以进入其他盘符来创建)用DOS命令e:先进到我的E盘,再输入dir查看所有E盘中所有的文件及文件夹(可以看到现在E盘并没有NodeDemo这个文件夹)
在这里插入图片描述
2.接下来我们开始新建一个文件夹,(在这里我就把创建的NodeDemo文件夹放在E盘了,你也可以选择其他盘符来存放demo)输入md NodeDemo然后按回车键,注意md后面有一个空格。然后可以用dir查看一下文件夹是否创建完成:如下图(我已创建好了)
在这里插入图片描述
3.然后再用cd命令将目录转到选定的目录:如下图
在这里插入图片描述
在NodeDemo目录下,在命令行中运行命令 vue init webpack firstApp。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeDemo 目录生成该文件夹),
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了如下图:

在这里插入图片描述
等待一会,就会显示创建项目创建成功,如下图
在这里插入图片描述
接下来,我们去看NodeDemo目录下去看是否已创建文件:
在这里插入图片描述
打开firstApp项目,项目中的目录如下:
在这里插入图片描述

介绍一下目录及其作用:

  • build:最终发布的代码的存放位置。

  • config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

  • node_modules:npm 加载的项目依赖模块,(整个项目需要的依赖资源)

  • src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

  • assets:放置一些图片,如logo等

    手机在线人工冲值
    手机在线人工冲值

    说明:我不知道这个系统还能用到什么地方!他的运作方式是这样的,客户在其他地方比如掏宝购买了 你得卡,然后在你的网站进行冲值,你得有人登陆并看着后台,如果有人冲值,就会刷出记录,手工冲值完毕后,你得点击 [冲值完毕],客户的页面 就会返回 冲值信息!安装:上传所有文件,倒入(sql.txt)mysql数据库,使用myphpadminphplib 777phplib/sys.php 777phplib

    下载
  • components:目录里放的是一个组件文件,可以不用。

  • App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

  • main.js :项目的核心文件

  • static:静态资源目录,如图片、字体等。

  • test:初始测试目录,可删除

  • .XXXX文件:配置文件。

  • index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。

  • package.json:项目配置文件。

  • README.md:项目的说明文件。

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。
(第一次创建vue项目的话 好像node_modules这个依赖包资源就会没有,反正没有的话就cnpm install 安装一下依赖就好了)我这个项目现在创建完就有 node_modules这个依赖包资源文件夹了就不用 再cnpm install 安装依赖包资源。

安装项目所需要的依赖先cd 进入到firstApp文件夹先
在这里插入图片描述
然后:执行 cnpm install (这里可以用cnpm代替npm了)
在这里插入图片描述
安装完成之后,我们到自己的项目中去看,(如果没有的话)会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
在这里插入图片描述
安装完依赖包资源后,我们就可以运行整个项目了。运行项目前一定要确保依赖包资源存在

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后,在浏览器中输入项目启动后的地址:localhost:8080在这里插入图片描述
在浏览器中会出现vue的logo:
在这里插入图片描述

相关专题

更多
node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

347

2023.09.19

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

93

2025.11.26

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

417

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

76

2025.09.10

vue.js为什么报错
vue.js为什么报错

vue.js报错的原因:1、语法错误;2、组件使用不当;3、数据绑定问题;4、生命周期钩子使用不当;5、插件或依赖问题;6、路由配置错误;7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.03.11

vue.js插槽有哪些用
vue.js插槽有哪些用

vue.js插槽的作用:1、提高组件的可重用性;2、实现组件的灵活布局;3、实现组件间的数据传递和交互;4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

174

2024.03.11

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 7万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号