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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 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分页的功能模块
2015/06/16 PHP
PHP实现递归的三种方法
2020/07/04 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
django和flask哪个值得研究学习
2020/07/31 Python
python 数据类型强制转换的总结
2021/01/25 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
护士实习自我鉴定
2013/10/22 职场文书
食堂员工工作职责
2013/12/18 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Java对文件的读写操作方法
2022/04/29 Java/Android