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 相关文章推荐
jQuery hover 延时器实现代码
Mar 12 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
Openlayers实现测量功能
2020/09/25 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
Python制作Windows系统服务
2017/03/25 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python控制Firefox方法总结
2019/06/03 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
就业协议书怎么填
2014/04/11 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript