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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
javascript实现标签切换代码示例
May 22 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
react 生命周期实例分析
May 18 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
浅谈COOKIE和SESSION区别
2015/07/19 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
详解django三种文件下载方式
2018/04/06 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
类的核心特性有哪些
2014/01/01 面试题
土地转让协议书
2014/04/15 职场文书
社团活动总结书
2014/06/27 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
三峡大坝导游词
2015/01/31 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
教你用python实现12306余票查询
2021/06/30 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL