Vue2.5学习笔记之如何在项目中使用和配置Vue
最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用 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 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下2018-02-02
下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue.js项目打包上线全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vite-plugin-svg-icons是一个Vite插件,其作用是将SVG图标文件转换为Vue组件,本文主要介绍了vue3+vite项目中显示SVG图片的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
当一个页面需要加载较多个组件时,并且组件自身又比较复杂,如果一次性加载,可能等待时间较长,体验不好,这个时候就需要延迟加载了,本文为大家介绍了Vue2实现组件延迟加载的示例代码,需要的可以参考下2024-01-01
这篇文章主要为大家介绍了 Tree组件搜索过滤功能实现干货详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
根据登录的角色不一样,实现不同的路由展示，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2024-04-04
弹窗效果是我们日常开发中经常遇到的一个功能，下面这篇文章主要给大家介绍了关于Vue+Element UI实现概要小弹窗的相关资料，需要的朋友可以参考下2021-05-05
最新评论