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实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JS实现导航栏楼层特效
Jan 01 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实现的CSS更新类实例
2014/09/22 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
Python实现线程状态监测简单示例
2018/03/28 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python定义类的简单用法
2020/07/24 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
python中最小二乘法详细讲解
2021/02/19 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
职务聘任书范文
2014/03/29 职场文书
小学一年级评语大全
2014/04/22 职场文书
医院护士工作检讨书
2014/10/26 职场文书
员工工作表现自我评价
2015/03/06 职场文书
高一军训口号
2015/12/25 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang