Vue开发实例(01)之环境搭建nodejs与运行第一个Vue项目
作者简介
作者名:编程界明世隐
简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注,期待与您一起学习、成长、起飞!
引言
Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手、带你飞!
即使你并非前端开发人员,对前端的开发流程进行一定的了解也是很有必要的,谁也不确定公司以后会不会让我做前端去,做些简单的实例既不需要花费很多时间,也可以提高自己的自信和成就感,所以跟着明哥走,没有错,来吧!
导航
✪ Vue开发实例目录总索引
◄ 已经是第一篇了
► 下一篇【02】将Vue项目代码导入到IDEA并运行
热门专栏推荐
【1】Java小游戏(俄罗斯方块、植物大战僵尸等)
【2】JavaWeb项目实战(图书管理、宿舍管理等)
【3】JavaScript精彩实例(飞机大战、验证码等)
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通
一、下载node.js
注意:
- 建议下载v12.16.0版本以上的,因为版本低无法创建Vue的脚手架。
- 文件选择:
Mac选择pkg版本下载,windows选择msi格式的下载(选择zip也行,但我喜欢用安装的)
下载方式1:
从官网下载:http://nodejs.cn/download/
下载方式2:
从我发现的一个网站下载,选择自己想要的版本
https://nodejs.org/download/release/
下载方式3:
从我的网盘下载,公众号【编程界明世隐】,回复:node
安装
双击下载好的安装文件,选择安装路径安装好即可。
安装完成后,输入命令查看版本,mac首次安装都无需配置环境变量。
命令的话都一样的,Windows也是这样用。
自定义配置全局模块和缓存路径
根据自己的需要创建好两个文件夹,Windows一般创建在安装目录下,Mac看自己想放哪里 ,新建目录说明:
node_global:npm全局安装位置
node_cache:npm缓存路径
配置环境变量
- windows配置
新增NODE_HOME,值为:E:\work\nodejs
修改PATH并在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global;
到cmd下执行命令
npm config set prefix “E:\work\nodejs\node_global”
npm config set cache “E:\work\nodejs\node_cache”
- Mac下配置
到终端执行命令
npm config set prefix “/users/work/nodejs/node_global”
npm config set cache “/users/work/nodejs/node_cache”
在终端使用vi编辑.bash_profile
- 使用命令:vim ~/.bash_profile
- 按 i 进入插入模式
- 在尾部插入以下命令,注意NODE_MODULES的路径哦
NODE_HOME=/usr/local/bin
NODE_MODULES=/users/work/nodejs/node_global
PATH=NODEHOME:NODE_HOME:NODEHOME:NODE_MODULES:$PATH
export NODE_HOME NODE_MODULES PATH
- 按ESC 再输入 :wq回车
- 然后输入以下命令
source ~/.bash_profile
更改镜像源
因为node服务器在国外,下载会比较慢,所以改成阿里云的镜像,执行以下语句windows和mac的命令是一样的。
npm config set registry https://registry.npm.taobao.org
查看镜像设置情况
npm get registry
安装Vue脚手架
在终端输入命令:
npm install -g @vue/cli
等待安装完成
创建Vue项目
在命令行进入自己想要创建项目的目录
cd /Users/work/VueWorkspace
创建Vue项目
vue create vuedemo1
进入选择界面
用上下方向键移动,然后回车,我选择Vue3,等待创建完成
创建完成后,目录如下:
执行启动项目命令(注意要先进入项目目录)
cd vuedemo1
npm run serve
提示启动完成
打开浏览器输入地址,上图中有提示的哦
http://localhost:8080/
按 ctrl+c 或者关闭终端停止服务。
小结
这节总结了“ idea下载和安装 ”,希望能对大家有所帮助,请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】, 如果有兴趣跟小明哥一起学习Java的,【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈!
导航
✪ Vue开发实例目录总索引
◄ 已经是第一篇了
► 下一篇【02】将Vue项目代码导入到IDEA并运行
热门专栏推荐
【1】Java小游戏(俄罗斯方块、植物大战僵尸等)
【2】JavaWeb项目实战(图书管理、宿舍管理等)
【3】JavaScript精彩实例(飞机大战、验证码等)
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通
Vue开发实例(01)之环境搭建nodejs与运行第一个Vue项目相关推荐
- vue开发移动端h5环境搭建
技术选型 公司现在需要开发移动端的h5,使用现在比较流行的vue 2.0开发,使用的脚手架是Vant2,网络访问使用的是axios,路由跳转使用的是vue-router,开发工具是vscode,作为一 ...
- 4412在linux环境开发实例,Exynos4412交叉编译环境搭建
交叉编译:在PC机(x86平台)上开发程序,在ARM板上运行,提高开发.编译速度. 环境: Tiny4412SDK1506开发板 需要软件: arm-linux-gcc-4.5.1-v6-vfp-20 ...
- Vue开发实例(05)之搭建项目主页面头部、导航、主体等页面布局
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Vue开发实例(15)之动态路由
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- 3.vue开发实例演示
个人博客:http://blog.kunpw.cn/ vue开发实例演示 1.解剖初始化模板 1.1 vue文件 如图所示,对于一个新建的vue文件而言,其中标签分为三个部分: template标签: ...
- 安卓开发(一)环境搭建、基本程序与控件
layout: post title: 安卓开发(一)环境搭建.基本程序与控件 description: 安卓开发(一)环境搭建.基本程序与控件 tag: 安卓 文章目录 Intent:协助应用间的交 ...
- Vue开发实例(07)之编写头部页面
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Vue开发实例(11)之el-menu实现左侧菜单导航
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Python 网站开发(一)环境搭建
前些天看到小阳买回来的一本 Python 基础教程,于是就产生了使用 Python 来开发一个小博客的想法.这个 Python 网站开发系列文章将不会过多说 Python 基本语法,主要是面向实践的. ...
- 使用Eclipse JEE+Mtj+Nokia S60 V3SDK开发J2ME应用的环境搭建
使用Eclipse JEE+Mtj+Nokia S60 V3SDK开发J2ME应用的环境搭建 2010-04-07 16:53 在Nokia S60 V3下进行J2ME应用程序开发,需要搭建 Noki ...
最新文章
- centos 7 安装GTK+-2.0
- 人脸识别简史与近期进展
- CV之FR(H+k机器学习):基于每人几张人脸图片训练H+k模型实现(国内外明星)新人脸图像的姓名预测(准确度高达100%)
- Acwing第 7 场周赛【未完结】
- 正则表达式中的字符类
- C语言编程如何快速注释?
- android模拟器默认位置的修改
- Linux虚拟化KVM-Qemu分析(十一)之virtqueue
- 一步一步学做一个CPU——2,Logisim的简单入门
- MATLAB简介与矩阵定义
- 综合布线实训室解决方案(转载)
- GNSS/INS组合导航(九):三维简化的INS/GPS组合导航系统
- 基于Java的资产管理系统的设计与实现
- 解决onenote同步速度慢问题
- Array Shrinking(CodeForces - 1312E )
- python turtle setheading_Python turtle.right与turtle.setheading的区别
- 虚拟同步发电机_学术简报基于分散式微电网的虚拟同步发电机无通信预同步并网方案...
- 笔记本电脑怎么录屏,3款简单操作电脑录屏软件
- 程序员工资大概组成【刚毕业的大学生看过来】
- 专题分纲目录 MEM/MBA数学基础