关于vue.js
vue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。
关于vue-cli
Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
使用:
安装vue-clinpm install -g vue-cli
使用vue-cli初始化项目vue init webpack my-project
进入到目录cd my-project
安装依赖npm install
也可以用vue ui来快速创建vue ui
学习与理解:
一、vue中使用jq库的插件
找到需要使用的插件
下载插件需要的css和js
在vue文件所在的根目录下载jquery包,导入到vue文件中的script标签所在位置:
a、import $ from ‘jquery’
b、因为插件需要操作dom元素,需要在页面结构加载完毕后才执行js代码,因此要将js代码写在Vue生命周期的 mounted(){ js代码 } 中将需要的css文件导入对应的vue文件的style中 :
@import "css文件的相对路径",根据需求,做适当的样式调整等
二:
1,.vue文件是一个组件,写html代码、js代码、css代码
2, 一个项目有一个根组件,用来承接所有子组件的展示
3,每个子组件单独创建,然后通过路由注册,配置url地址建立访问,最后导出给入口文件。
4,入口文件导入路由文件后,将路由注入到根实例中,在跟组件中渲染
三:
不是所有的包或插件都要使用vue.use( )才能使用,而是基于vue的包和插件,才需要通过vue.use()来集成使用
四:
main.js是整个项目的入口文件,是项目的基石。所有的文件都要关联到这里,才能最终通过webpack打包展示。
App.vue是根组件,是项目打开后显示的第一个页面。注入在根实例上的路由,路由关联的组件最后都会渲染在App.vue的router-view占位标签中。
router文件夹中的index.js是一个路由文件,所有的子组件的注册都在这里执行:
a、使用import导入组件
b、创建路由couter,配置路由参数,自动注册组
c、export default router 导出路由