最简单启动vue前端项目
安装node.js
从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成后,打开命令行工具,输入
node -v
如下图,如果出现相应的版本号,则说明安装成功。
node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。
安装cnpm在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待安装完成
完成之后,我们就可以用cnpm代替npm来安装依赖包了。
安装vue-cli脚手架构建工具
在命令行中运行命令
cnpm install -g vue-cli
然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
用vue-cli构建项目
要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。
在桌面目录下,在命令行中运行命令
vue init webpack firstVue
解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。
得到的文件就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装
安装项目所需的依赖
要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令
cnpm install
等待安装。
安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。
安装完依赖包之后,就可以运行整个项目了。
运行项目在项目目录中,运行命令
npm run dev
会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。
项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。
运行成功
最简单启动vue前端项目相关推荐
- VUE项目学习(一):搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
- cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目 下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量 进入找到Path进入 这里填你的node.js的安装路径 验 ...
- vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包 扔服务器 one 前期准备 首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
- Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
- Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
- Vue前端项目自适应布局
Vue前端项目自适应布局 一.单位尺寸 二.基于rem实现自适应布局 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
- vue前端项目启动出错处理
操作 1.使用npm install 安装vue所需的依赖包 2.使用npm run dev启动前端项目 错误信息 Syntax Error: D:\RuoYi-Vue\ruoyi-ui\node_m ...
- linux系统下docker搭建vue前端项目开发运行环境详解
1. 初衷 最近做了几个前后端项目,在前后端项目链条的时候,发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错, npm install一直无法安装,但是我在linux系统下面安 ...
- B站云E办Springboot+vue——前端项目完整版(含源码)
一.项目简介 项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...
最新文章
- Android stutdio2.2 启动模拟器出现“/dev/kvm is not found.”解决方法
- 基于tomcat集群做session共享
- 【APIO2015】Bali Sculptures
- php中的全局变量$GLOBALS与global的区别
- 计算机制图作品答辩,工程制图(第一章)答辩.ppt
- 雷军40岁低潮岁月做了什么,才有小米
- 创翼linux版本,创翼电信客户端for Mac-创翼客户端Mac版下载 V1.3.7-PC6苹果网
- 腾讯发布三项息争前提 360将扣扣保镖下线
- Linux网卡流量限制
- 4、keygen激活secureCRT
- 常见五轴机床的机械结构形式讲解!
- 各标点符号的英文名称
- LAN、WAN、WLAN、WIFI
- 手把手教你搭建惊艳的博客
- LSTM中对time step的理解
- Winform从入门到精通(17)——PictureBox(史上最全)
- Go语言交叉编译二进制文件
- android电视 优酷视频,将优酷视频投屏到智能电视上,竟然还有这种操作
- Python实现图片识别加翻译
- NOI题库 scratch题解(部分)