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

wangym 发布于2019-08-23 12:08 / 2425人阅读

摘要：最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用元素标签引入即可。安装成功之后，我们执行以下命令就可以创建一个完整的项目案例。

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

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

{{name}}

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

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

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 查看我们的初始化项目

是不是很酷，我们的第一个项目已经就这样创建完成，接下来我们就慢慢的去开始我们的项目开发吧。加油！

关注微信公众号：六小登登。领取全套学习资源

云服务器 GPU云服务器 webrtc如何在web中使用在php中如何使用n vue 中使用 webrtc vue中使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97975.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
(原创)vue 学习笔记

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。开篇语我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

layman 2019-08-22 18:09 评论0 收藏0
Vue2.5笔记：Vue中的模版

摘要：模版语法中的模版是基于的模版语法，所有的模版都是合法的，所以能被遵循规范的浏览器和解析器解析。表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的表达式。我们也简单的叙述了模版编译的整个流程。我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。模...

shevy 2019-08-23 12:11 评论0 收藏0
Vue2.5笔记：Vue的实例与生命周期

摘要：总结这边文章主要是介绍了下的实例与生命周期，在实例化的过程中我们可以添加许多可选对象，比如生命周期钩子函数等，让实例产生我们想要的行为。理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设...

Ashin 2019-08-23 12:10 评论0 收藏0
Vue2.5笔记：v-if 和 v-show指令

摘要：并在上面使用，最终渲染结果将不包括元素。另外一个根据条件展示元素的指令，用法与大致相同。注意，不支持元素，也不支持与看完了文章，你会发现我们可以利用和两个指令来控制我们元素的行为。熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？我的理解就是：指令是用来控制 DOM 元素的行为，例如最...

BigTomato 2019-08-23 12:15 评论0 收藏0