Vue2.5学习笔记之如何在项目中使用和配置Vue


Posted in Javascript onSeptember 26, 2018

最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。

<script src="../xxx.js"></script>

Vue 我们也可以这种引入的方式

<div id="root">{{name}}</div>
<script src="./dist/vue.js"></script>
<script>
 const vm = new Vue({
  el: '#root',
  data: {
   name: 'Vue'
  }
 })
</script>

随着前端的发展我们出现了模块化的开发方式,例如异步(AMD)、同步(CommonJS)等等。

在我们正式开始 Vue 项目开始的时候,我们现在安装一个 Vue Devtools 一个官方的 Vue 调试 chrome 插件,安装之后我们在 chrome 的控制台就可以看到我们创建的 Vue 的对象实例。

Vue-CLI

Vue 给我们提供了上述所有方式的项目引入方式,不但如此,Vue 还给我们提供了一个目前非常流行,非常牛逼的脚手架(Vue CLI )工具,它能在短短的几分钟之内就能构建一个完整的单页面应用 (SPA)项目。其中包含:热加载、校验、打包等构建项目等工具;下面我们来一步一步的构件一个新的项目。

安装工具

//npm
npm install -g @vue/cli

//yarn
yarn global add @vue/cli

安装完成以后我们验证下有没有安装成功,执行下面命令后如果安装成功后,会显示版本号,我安装的版本是 3.0.4

vue --version

如果你和我一样恭喜你你安装成功了,如果没有安装成功你可以查看下权限的问题或者该用 cnpm 试试。

安装成功之后,我们执行以下命令就可以创建一个完整的项目案例。

vue create my-project

执行上述命令以后,会让我们选择是按照默认(default)的配置,还是选择执行配置,如果你已经非常熟悉了脚手架工具或者默认的配置你满足不了你的需求,你可以选择自己行配置,不过这里还是建议不太熟悉的同学还是使用默认配置就行。

等待安装完成之后,我们执行下面命令就可以看到我们的初始化项目了。

cd my-project
npm run serve

我这里给的是 8080 端口,我们本地访问 localhost:8080 查看我们的初始化项目

Vue2.5学习笔记之如何在项目中使用和配置Vue

总结

以上所述是小编给大家介绍的Vue2.5学习笔记之如何在项目中使用和配置Vue ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
记一次vue跨域的解决
Oct 21 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
You might like
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
深入学习python的yield和generator
2016/03/10 Python
python实现京东秒杀功能
2018/07/30 Python
python try except 捕获所有异常的实例
2018/10/18 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Django框架 querySet功能解析
2019/09/04 Python
python 实现兔子生兔子示例
2019/11/21 Python
python实现字符串和数字拼接
2020/03/02 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
新年寄语大全
2014/04/12 职场文书
3的组成教学反思
2014/04/30 职场文书
交通安全主题班会
2015/08/12 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书