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构建项目笔记4(在vue中使用sass的配置)
- [dotnetCore2.0]学习笔记之二: ASP.NET Core中,如何灵活使用静态文件和加载自定义配置
- directx 学习笔记之一 如何安装并且在visual studio2010的项目中使用directx
- SQL学习笔记:服务端配置-如何使用企业管理器
- Maven学习笔记二eclipse如何使用 Maven、Maven目录pom.xml文件的解析、maven 和maven项目之间的关系
- vue-cli学习——stylus在项目中如何配置
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- vue学习笔记-使用vue-cli脚手架快速创建vue项目工程
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
- 【Struts2学习笔记】struts2.5使用通配符配置action跳转
- vue项目如何使用nginx配置跨域
- 如何在Windows 2003 中使用Windows Live Writer? - 2010年5月21日学习笔记(1)
- 个人使用的Vim配置及Vim学习笔记
- Web开发学习笔记之一:如何配置IIS使其能运行ISAPI动态链接库程序?
- JQuery学习笔记——如何使用JQuery
- 尚学堂Struts学习笔记1:Struts标签的配置和使用
- 学习笔记 如何使用svnsync命令对SVN库进行备份
- C++/GDI+ 学习笔记(一)——安装、配置&使用
- snmp学习笔记——配置使用trap