vue环境搭建原来也可以如此简单

在网上看到很多安装vue开发环境的文章,我是一个初学者,总感觉弄起来很麻烦。搜索了很多文章,最后自己摸索出一种更加简单的搭建方式,这里记录一下,如果你也是新手,对你有用的话,请点赞支持一下。

1. 先下载nodejs

网官下载地址:http://nodejs.cn/download/
选择自己的操作系统环境的适应安装包。我的是mac环境,就下载mac版本的安装包,下载之后,直接双击安装即可。
验证是否安装成功:

安装成功

2. 安装vue

npm install vue

相关文档:https://cn.vuejs.org/v2/guide/installation.html

使用淘宝镜像:

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

这里注意,需要使用最高权限的账户执行此命令,要不然会安装失败。
安装成功之后,就可以使用 cnpm 命令安装依赖的模块了。比如router:

cnpm install vue-router

3. 下载开发IDE

下载址:https://www.dcloud.io/hbuilderx.html
如果不开发app,下载标准版本即可。我是开发web的管理系统,所以下载的mac 标准版本。

4. 创建项目

安装好Hbuilder X之后,点击文件->新建->项目


创建vue项目

然后点击创建,它有点慢,因为第一次需要从网上下载创建的模板。等一会就好。

5. 运行项目

点击要运行的新创建的项目,然后选择菜单上面的运行->运行到终端->npm run serve
如果没有终端,会提示下载内置终端,也可以设置运行在外部的终端上面。
运行成功后,在控制台输出:


运行项目

然后在浏览器中输入:http://localhost:8080/
就可以打开第一个默认的网页了:

打开的第一个网页

欢迎关注公众号
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容