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实现HTML5 placeholder效果实例
Dec 09 Javascript
javascript修改图片src的方法
Jan 27 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php array_flip() 删除数组重复元素
2009/01/14 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
angular4强制刷新视图的方法
2018/10/09 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
一套VC试题
2015/01/23 面试题
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
爱国电影观后感
2015/06/19 职场文书
广播体操比赛主持词
2015/06/29 职场文书
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技