Vue项目环境搭建详细总结


Posted in Javascript onSeptember 26, 2019

关于Vue安装的详细步骤总结

安装NodeJs

首先解释一下什么是nodejs,为什么要安装node?node的优点?

node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多。

node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势。
另一个好处是,使用javascript作为服务器端脚本语言,可以消除一些与浏览器端js脚本的冲突。甚至发挥javascript动态编程的特性,在服务器与浏览器之间建立直接的动态程序。
总的来说,node.js可以像PHP一样开发动态网站和WEB应用。

安装步骤

安装环境:Windows7  x64

1.第一步检测一下电脑是否安装node.js

(1).开始-搜索cmd-回车,在命令行输入node -v,回车,如果出现“'node' 不是内部或外部命令,也不是可运行的程序...”时说明没有安装node.js;

(2).https://nodejs.org/en/  下载并安装node.js(选择LTS格式),下载好后双击开始安装,点击Next:

Vue项目环境搭建详细总结

(3).勾选“I accept the terms in the License Agreement”同意许可协议,并单击Next下一步,出现如下界面:

Vue项目环境搭建详细总结

(4).Node.js默认安装路径为“C:\Program Files\nodejs\”,可以修改其他盘(我选择的是安装在D盘),单击Next,出现安装模式及模块选择界面:

Vue项目环境搭建详细总结

(5).接着点击Next:

Vue项目环境搭建详细总结

(6).确认无误后,点击Install,开始安装:

Vue项目环境搭建详细总结

(7).耐心等待一会,安装完成,点击Finish即可:

Vue项目环境搭建详细总结Vue项目环境搭建详细总结

(8).打开cmd(Windows+R),检测node是否安装成功:

 首先测试npm是否安装成功,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入“npm -v”来测试是否安装成功。

(这种安装较慢,也可以利用淘宝镜像进行安装, 在cmd里直接输入:npm install -g cnpm ?registry=https://registry.npm.taobao.org,回车,等待安装...(windows使用管理员身份进行安装))

Vue项目环境搭建详细总结

2.安装全局webpack

在命令行里输入:npm install webpack -g (C盘)进行全局安装:

Vue项目环境搭建详细总结

3.安装vue-cli脚手架工具

在命令行里输入:npm install -g vue-cli  (C盘)进行全局安装:

输入:vue,回车,如果出现vue信息说明安装成功

Vue项目环境搭建详细总结

4.创建项目

关闭命令行,任意选择一个盘(这里,我选择D盘,新建一个名为mypro的文件夹),把mypro文件夹放进HBuilder,进入D盘mypro文件夹,右键选择在此处打开命令窗口,输入 vue init webpack mypro 回车:

Vue项目环境搭建详细总结

5.进入项目文件夹:cd mypro   (cd +  vue init webpack mypro  中的项目名字mypro),回车进入项目文件夹:

输入: npm install     初始化,安装依赖包node_modules

Vue项目环境搭建详细总结

6.安装完成后输入:npm run dev  运行测试:

Vue项目环境搭建详细总结

7.最后浏览器弹出结果为:

Vue项目环境搭建详细总结

补充:

vue cli3安装:

一、安装

npm install -g @vue/cli
或
yarn global add @vue/cli

检查安装 vue -V

二、创建新项目

npm create admin

 Vue项目环境搭建详细总结

admin是你需要创建的项目名称,这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个

三、enter之后会弹出以下选择

Vue项目环境搭建详细总结

当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里可以根据自己的需求来选择

四、安装预处理语言

Vue项目环境搭建详细总结

这一步询问你安装哪一种 CSS 预处理语言,根据自己的需求自行选择即可

五、选择自动化代码格式检测

Vue项目环境搭建详细总结

上面这个是询问你代码格式化检测,配合vscode编辑器的Prettier - Code formatter插件,可以选择随后一个

六、保存设置 

Vue项目环境搭建详细总结

 上图第一个选项是问你是否保存刚才的配置,选择确定后你下次再创建新项目就有你以前选择的配置了,不用重新再配置一遍了

七、选择配置文件位置

Vue项目环境搭建详细总结

上图意思问你像,babel,postcss,eslint这些配置文件放哪?
第一个是:放独立文件放置
第二个是:放package.json里
这里推荐放单独配置文件,选第一个 

八、最后一步保存设置

Vue项目环境搭建详细总结

 上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗?
最后一个是描述项目,你随意选择,点击确定就开始下载模板了

九、下载模板

Vue项目环境搭建详细总结

cd admin进项目,启动服务npm run serve,这里是没有vue.config.js文件的

十、新建一个vue.config.js文件,进行项目配置

Vue项目环境搭建详细总结

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 #Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 #Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 #Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 #Javascript
Vue 刷新当前路由的实现代码
Sep 26 #Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 #Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 #Javascript
You might like
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python将unicode转为str的方法
2017/06/21 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
Python如何实现单例模式
2016/06/03 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
合作意向书格式及范文
2014/03/31 职场文书
清明节演讲稿
2014/05/27 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015年考研复习计划
2015/01/19 职场文书
毕业论文指导老师意见
2015/06/04 职场文书