Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何新建一个vue项目(图文详解)

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

作者头像
honey缘木鱼
发布于 2018-12-04 01:36:50
发布于 2018-12-04 01:36:50
7.5K0
举报
文章被收录于专栏:娱乐心理测试娱乐心理测试

作为一个几年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的道路。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.10.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何新建vue项目(如何配置vue的开发环境)
一、vue开发环境搭建 1、安装nodejs 步骤:在node官网(https://nodejs.org/en/download/ )选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,在cmd控制台输入node -v,如果出现版本信息即表示安装成功。
全栈程序员站长
2022/07/30
6470
第一个 vue-cli项目
预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速
张小驰出没
2021/04/19
3520
第一个 vue-cli项目
vue脚手架创建项目
Vue作为现在前端三大框架之一,又是国人开发的,现在已经越来越火。作为最轻量级的一个前端框架,入门简单,今天用脚手架创建一个最简单的应用。
wade
2020/04/24
5590
vue脚手架创建项目
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境
Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装。
朝雨忆轻尘
2019/06/19
2.8K0
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境
Vue项目从搭建环境到打包上线
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
王小婷
2019/05/14
2.1K0
Vue项目从搭建环境到打包上线
十分钟上手-搭建vue开发环境(新手教程)
想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue开发环境,运行GitHub上的开源项目。步骤很简单,只是在搭建环境的过程中会遇到各种各样奇怪的报错,十分让人头疼。
王小婷
2025/05/18
4510
十分钟上手-搭建vue开发环境(新手教程)
Vue安装及环境配置、开发工具
大家好,又见面了,我是你们的朋友全栈君。 本文主要介绍了Vue的安装及环境配置,新建vue项目,简单介绍vue开发工具和项目结构。
全栈程序员站长
2022/06/30
1.6K0
Vue安装及环境配置、开发工具
vue学习起步,vue环境安装
vue安装的前提是安装了nodejs 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpac
蓓蕾心晴
2018/04/12
7960
vue学习起步,vue环境安装
windows10系统下vue开发环境搭建
到官网下载自己系统对应的版本,按照推荐的方式默认安装,这里不再赘述。安装完成后,打卡powershell,执行命令node -v查询一下,检查是否正常安装。
全栈程序员站长
2022/11/01
9780
windows10系统下vue开发环境搭建
Vue开发环境搭建全过程,一步一个坑
Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样
一墨编程学习
2018/09/14
9680
Vue开发环境搭建全过程,一步一个坑
vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)
网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题。接下来看下最新的安装方法。
西西嘛呦
2020/08/26
4.4K0
vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)
详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库;vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649
王小婷
2018/09/26
6.1K0
详解如何在vue项目中引入饿了么elementUI组件
1.创建项目
然后除了Use EsLint……选择no(代码检查功能,如果选择了默认回车,少打个空格都会报错),其他的询问都直接敲回车。
玩蛇的胖纸
2019/09/24
4050
1.创建项目
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
今天具体说一说比较常用的;Mint UI框架的按钮组件,Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。
王小婷
2025/05/18
790
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
使用Vue-cli搭建项目教程
使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,Github仓库 安装 Node.js 首先需要安装node环境,可以直接到node官网下载安装包,安装完成后,可以命令行工具中输入 node -v 查看是否成功,不成功清除npm缓存npm cache clean重新安装. 推荐使用国内淘宝镜像安装(cnpm)npm install -g cnpm --registry=https://registry.npm.
大象无痕
2018/07/17
7320
vue.js环境搭建
vue最开始说是库,现在应该可以说是框架了,很多大公司都开始用vue了,这得源于vue的本质 1:数据化驱动,2:组件化模板。项目中用vue都得搭建环境,经过一段时间的摧残后终于有勇气来写篇关于vue环境搭建的博文了,我相信网上已经有很多前辈的博文能够帮助大家完成搭建,与我来说只是记录下自己搭建环境的一点心得,如若能够帮助到两三人,足以。     1:因为vue.js的运行是基于node.js的npm环境下,所以我们得先安装node.js,这个就不累赘了,网上下个node.js安装即可。  2:记得刚开
大当家
2018/06/28
1.5K0
webpack+vue初始化项目
第1步:官网下载并安装nodejs nodejs官网:http://nodejs.cn/download/ 第2步:npm下载插件速度很慢,推荐安装淘宝镜像cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 第3步:创建项目 ①安装vue-cli脚手架构建工具 cnpm install -g vue-cli ②初始化基于webpack的vue项目 vue init webpack project_name ③进入pr
青梅煮码
2023/02/18
3990
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
今天具体说一说比较常用的;Mint UI框架的按钮组件,Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。
王小婷
2019/03/22
3.1K0
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
vue开发环境搭建
首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 vue的安装 1.vue的安装依赖于node.js,所以先安装过node.js。从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)安装完成后可进入cmd编辑器,输入命令 node -v进行查看,如果成功安装node会出现 v 6.9.1 2.安装cnpm 在命令行中输入 npm install -g cnpm --regi
似水的流年
2018/04/23
9950
vue开发环境搭建
如何新建一个vue项目
大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
故久
2019/09/29
1K0
如何新建一个vue项目
相关推荐
如何新建vue项目(如何配置vue的开发环境)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档