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的this关键字
May 28 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
javascript实现简易计算器功能
Sep 23 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
咖啡语言
2021/03/03 咖啡文化
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python装饰器与递归算法详解
2016/02/18 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
好的促销活动方案
2014/08/21 职场文书
公司演讲稿开场白
2014/08/25 职场文书
先进基层党组织材料
2014/12/25 职场文书
心灵捕手观后感
2015/06/02 职场文书
网络舆情信息简报
2015/07/21 职场文书
电台广播稿范文
2015/08/19 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Python编写nmap扫描工具
2021/07/21 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python