如何新建一个vue项目(图文详解)

作为一个几年IOS开发经验的移动端程序猿来说,已经感到很大的危机感,不得不学习新的东西,选择了在众多框架中脱颖而出的vue作为学习的目标。

定好目标,首先应该想到的就是安装环境,搭建框架,一步一步的完成最基础的新建一个Vue项目的目的。

第一步npm安装

步骤:

1. 到node官网 选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。

2. 输入node -v,如果出现版本信息即表示安装成功。

node版本号

第二步:使用淘宝NPM 镜像

1. 输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,安装淘宝镜像安装相关依赖。

2. 安装vue-cli脚手架构建工具,输入命令 npm install -g vue-cli,安装完成即可。

第三步:使用vue-cli创建项目

1. 选定路径,新建vue项目,这里我是新建到桌面上新建vue项目文件夹里。

vue项目路径

2.使用脚手架安装项目: vue init webpack +项目名称  ,项目是基于webpack的

初始化

项目初始化完成

第四步:启动项目

1. 进入项目目录:cd demo,(这里我是用webStorm打开的项目)

2. 安装项目所需要的依赖:npm install (如果用webStorm打开的话就需要一下界面显示操作)

webstorm终端位置

启动项目

3. 启动项目:npm run dev

启动成功,浏览器打开:localhost:8080,即可看到vue项目。

打开新建vue项目页面

最后查看项目vue的目录结构

项目配置

一个完整的vue小项目就这样创建完成了,开启了学习vue的道路。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

svn 基础架构介绍

45650
来自专栏程序员的碎碎念

git上传更新项目-错误总结

前些天做完项目一部分内容的时候,想git上传代码上去远程仓库里,却出现了不少git的错误提示信息。在这里总结一下吧: 一、正确的git上传更新项目步骤为:...

32630
来自专栏小白课代表

PanDownload 1.5.4 回归!享受飞一样的下载体验!!!

29720
来自专栏黑白安全

如何检测提升网站访问速度

可以百度一下“网站测速”通过工具检测网站所在服务器的响应速度,国内外都可以测试,查看服务器在不同地区的响应速度。

69540
来自专栏较真的前端

不可忽视的前端安全问题——XSS攻击

18950
来自专栏java思维导图

从输入URL到页面展示到底发生了什么

地址:http://www.cnblogs.com/xianyulaodi/ 作者:咸鱼老弟

15230
来自专栏逸鹏说道

全站缓存时代

原则:动静分离,分级缓存,主动失效。 Web 开发中,接口会被分为以下几类: 纯静态页面。打死我都不会修改的页面。很长一段时间内,基本上不会修改。比如:关于我们...

42680
来自专栏云计算教程系列

在Centos上安装Node.js

Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台avaScript 运行环境。Node.js由Node.js基金会持有和维护,并与...

59700
来自专栏啸天"s blog

proxyee-dowm无封号风险的百度云高速下载器

25540
来自专栏刺客博客

Centos下使用ntsysv命令来控制开机自启软件

11820

扫码关注云+社区

领取腾讯云代金券