node创建Vue项目步骤详解


Posted in Javascript onMarch 06, 2020

vue的安装

Vue.js不支持IE8及以下版本。因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟。

Vue.js支持所有兼容ECMAScript5的浏览器。

在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用。

首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js。

如何查看node是否安装或者node版本呢?
进入cmd,输入命令 node -v,回车查看。node最好使用新一些的版本,否则后续安装会提示node版本过低

node创建Vue项目步骤详解

如果是安装过node,则会显示node的版本,否则就会提示不是内部或外部命令,这时候需要自行去node官网下载 
并安装

1,安装vue

npm install vue

安装完毕后,可以检验版本。

vue -V

node创建Vue项目步骤详解

到此vue安装成功

创建一个vue项目

1,全局安装 vue-cli

npm install --global vue-cli

2 , 创建一个基于webpack 模板的新项目

vue init webpack new-project

输入上面命令后,会询问几个选项,根据自己需要填写就可以了。

Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。

Project description:项目描述,直接回车

Author :作者

vue build 构建方式(暂且这么解释)

两个选择(上下箭头选择,回车即为选定)

1.Runtime + Compiler:recommended for most users

(译:运行+编译:被推荐给大多数用户)

2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY 

allowed in .vue files-render functions are required elsewhere

(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)

这里推荐使用1选项,适合大多数用户的

install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)

Use ESLint to lint your code?是否使用ESLint检测你的代码?

(ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)

Pick an ESLint preset:选择分支风格

选项有三个

  1. standard(https://github.com/feross/standard) js的标准风格
  2. Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
  3. none (configure it yourself) 自己配置

Setup unit tests? 是否安装单元测试(暂不详细介绍)

Pick a test runner 选择一个单元测试运行器

选项有三个

  1. Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
  2. Karma and Mocha
  3. none

Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)

Should we run 'npm install' for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)

选项有三个

  1. yes,use npm(使用npm)
  2. yes,use yarn(使用yarn)
  3. no,I will handle that myself(自己操作)

一路回车到此等待安装完毕,会提示接下来的命令行

node创建Vue项目步骤详解

 3,安装依赖

进入项目

cd new-project

安装

npm install

4,启动项目

npm run dev

这时候在浏览器中打开cmd上显示的地址就可以看到新建的页面。

http://localhost:8081

但是这个只能在本地跑,要如何在我们自己的服务器上访问呢? 此时需要执行: ·

npm run build

到此这篇关于node创建Vue项目步骤详解的文章就介绍到这了,更多相关node创建一个Vue项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
React简单介绍
May 24 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 #Javascript
小程序跳转H5页面的方法步骤
Mar 06 #Javascript
js实现点赞按钮功能的实例代码
Mar 06 #Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 #Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 #Javascript
vue-router 路由传参用法实例分析
Mar 06 #Javascript
JavaScript前端实现压缩图片功能
Mar 06 #Javascript
You might like
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
js简易namespace管理器 实例代码
2013/06/21 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
javascript计时器详解
2015/02/28 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python中的列表与元组的使用
2019/08/08 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
查摆问题对照检查材料
2014/08/28 职场文书
十佳党员事迹材料
2014/08/28 职场文书
服务整改报告
2014/11/06 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
校长师德表现自我评价
2015/03/05 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
python pyhs2 的安装操作
2021/04/07 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Python初学者必备的文件读写指南
2021/06/23 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL