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 类的使用详解
May 07 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP中的替代语法介绍
2015/01/09 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
在vue 中使用 less的教程详解
2018/09/26 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python相似模块用例
2016/03/04 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python3.5运算符操作实例详解
2019/04/25 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
2014年党务公开方案
2014/05/08 职场文书
暑期教师培训方案
2014/06/07 职场文书
股指期货心得体会
2014/09/13 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL