详解vue.js 开发环境搭建最简单攻略

网络编程 2024/9/24 佚名

3 1 2

做为一名学习路上的小白，起初就对 vue.js 有着莫名的好感，知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后，妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档，首先要搭建一个开发环境，因为自己太小白，看了一些搭建开发环境的博客，表示专业术语太多依然还是一脸懵逼。

具体流程大概如下：

很难理解？没关系，我也没理解，跟着操作就行了，我是window系统。

1.安装node.js

起初是很不理解的，我学 vue.js 还要掌握 node.js吗？这是没有关联的，NPM是NodeJS下的一个包管理工具，它可以很方便的帮你管理（可以简单理解为下载）各类前端的框架或插件，类似于PHP的composer，Twitter 的 Bower 一样。使用Vue不需要安装NodeJS，这里下载NodeJS只是为了使用其内置的NPM工具，所以不需要你有任何的NodeJS基础，只需要运行 npm install vue 命令，即可把 Vue 的最新版本下载至 node_modules 文件夹。如果你只是想手动引入 Vue ，只需要在「https://vuejs.org/js/vue.js」进行下载，或者通过CDN进行引入。

2.安装淘宝镜像

在这里，有一个问题，使用 npm 会导致网速很慢，对于大陆用户，建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度。

打开命令行，输入以下命令

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

直接复制上去就好，下面会出现一串代码，表示在安装，无需理会。

3. 全局安装 vue-cli 脚手架

继续在命令行输出以下命令：

cnpm install webpack -g

-g 表示全局，输出上面的指令之后，下面又会有一串代码，表示安装无需理会，安装完成之后可以检测一下，输出 vue ，会显示这样的情况，表示安装成功。

4.安装 webpack

继续在命令行输入以下命令：

vue init webpack my-first-vue-project

创建一个基于 webpack 模板的新项目，后面的 my-first-vue-project 指的是这个项目的名称，你也可以换成其它的。

然后会下载安装这套模板，命令行会出现几个问题，你跟着下面的步骤回答就可以了。

"" alt="这里写图片描述" src="/UploadFiles/2021-04-02/2017061210254511.png">

5. 用CD命令行查找进入到工程目录

6.安装依赖

在当前工程目录下输入命令行：

cnpm install

安装完成之后，在电脑上回到 my-first-vue-project 这个文件夹，里面会多一个 node_modules 文件夹。

7. 启动项目
接下来继续输入以下命令行：

npm run dev

服务器启动成功之后，下面就会给出一串指令告诉你:

Listening at http://localhost:8080

然后到浏览器进入这个页面可以看见这样的页面：

这样就表示开发环境搭建结束啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue.js环境搭建,vue.js开发环境搭建,vue,环境搭建

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“详解vue.js 开发环境搭建最简单攻略”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

详解vue.js 开发环境搭建最简单攻略

JavaScript初学者必看“new”

Ionic + Angular.js实现验证码倒计时功能的方法

评论“详解vue.js 开发环境搭建最简单攻略”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接