从零搭建一个vue项目
为了几个姐妹的需求,本文详细图解怎么样从零搭建一个vue项目,供参考。
第一步:了解工具;
首先我们需要一些工具,比如npm、nodejs、vue-cli
和一个编译器vscode(也可以用别的,这里用vscode作为开发工具演示)。第二步:检查工具;
window+r快捷键打开cmd.exe窗口,检查一下以上是否已安装。
安装则会显示出版本,没有安装可点击第一步关键词链接,有安装教程,npm和nodejs需要版本对应,需注意一下。第三步:创建项目;
新建一个空白文件夹用来存放项目,打开终端:
终端输入命令,创建一个叫hello-world的项目,旧版vue-cli安装命令不一样(vue init webpack hello-world
)这里我们vue-cli版本较新,用下面这个命令:
vue create hello-world
会弹出让我们选择vue3还是vue2开发,这里看需要,演示选vue3,回车就行了。
这是创建进度条,需要做的就是等待就好了。有可能弹出让选择npm还是yarn,我们选npm,没有弹出就忽略这句话,这是创建好了一个vue项目的目录:
第四步: 安装依赖;
先cd到项目目录下
安装依赖命令:
npm install
第五步:运行项目;
npm run serve
这样就是运行成功了,怎么看运行命令,可以打开package.json文件,如上图,能看到运行和build打包命令。
这就是网页上打开的效果了。
下次有空说打包和部署。(画饼)
从零搭建一个vue项目相关推荐
- vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目 一.安装node环境 二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目 三.vu ...
- 如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境 一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
- 手把手教你从0开始搭建一个vue项目(完结)
前言 上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
- 多个vue项目合并成一个_零基础搭建一个Vue项目,你学会了吗?
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
- 抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
- 搭建一个Vue项目(完整步骤)
一.安装Node环境 具体请参考:http://www.dinganan.cn/nodej安装和配置/ 二.搭建vue项目环境 1.全局安装vue-cli npm install --global v ...
- 如何搭建一个Vue项目
一.在搭建前,首先检查自己的搭建环境 使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装) 使用npm -v指令,查看自己的npm版本(是否安装) 二.搭建Vue项目环境 ...
- 如何利用webpack4.0搭建一个vue项目
作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下 这里是参考文章 https://www.jianshu.com/p/1fc5b5151abf 文 ...
最新文章
- 如何优雅的使用 phpStorm 开发工具
- 计算机教案word格式模板,用自定义模板编辑教案
- 研究表明:安卓和iOS应用无节操滥用邮箱和定位数据
- php用array_merge实现无限级分类
- linux 管理mysql,Linux上MySQL的管理配置
- 没有体现JAVA接口功能_深入浅出分析Java抽象类和接口【功能,定义,用法,区别】...
- Jaxb annotation使用
- Flutter 页面托动按钮 DraggableFloatingActionButton
- 新iPhone将采用更大容量电池:最低3110mAh?
- c语言switch case ppt,C语言-09switch-case多分支开路语句.ppt
- 《小团团团队》【Alpha】Scrum Meeting 3
- 达芬奇17(DaVinci Resolve Studio 17)兼容big surv17.0b9最新版
- 人类高质量编程语言Delphi盛大发布2021新版本RAD Studio 11 Alexandria
- odps传大文件到oss上_如何导入数据到odps
- python14张图下载_Python网络爬虫入门(三)—— 做个简陋的pixabay 图片下载器 (附源码)...
- Micro-personnel部署
- 开发者如何了解技术前沿? 再也不用看微信公众号的软文了!
- 概率论知识回顾(二):古典概型,几何概型
- 英汉对照:32个最富哲理的名言警句
- 笔记本外接显示器,过一段会自动休眠
热门文章
- Python 代码库之Tuple如何append添加元素
- 你应该知道的原型图工具Mockplus(摩客)
- 基础电路设计知识:电阻、电容、电感、二极管、三极管、mos管!
- php 车牌号限号,机动车限行尾号今天起轮换 周一至周五分别限行4和9、5和0、1和6、2和7、3和8...
- visio如何改变折线箭头拐弯方向
- linux sipp 呼叫转移_SipP绑定多IP进行注册、呼叫
- Linux:TCP粘包问题的模拟实现以及解决方法
- python求绝对值_python绝对值怎么计算
- R语言 线性混合效应模型实战案例
- 为什么我的QQ会被冻结?