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 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python中常见的数据类型小结
2015/08/29 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python控制Firefox方法总结
2019/06/03 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python向图片里添加文字
2019/11/26 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python django中8000端口被占用的解决
2019/12/17 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
进程的查看和调度分别使用什么命令
2015/03/25 面试题
毕业生自我推荐
2013/11/04 职场文书
军训自我鉴定
2014/01/22 职场文书
升国旗演讲稿
2014/09/05 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
社区文明倡议书
2015/04/28 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电