Vue基础概念
什么是Vue？
- 渐进式javacript框架, 一套拥有自己规则的语法
什么是渐进式？
- 逐渐使用，形成更多的功能，增量开发, 组件集合, 便于复用
什么是框架？
- 库: 封装的属性或方法 (例jquery.js)
- 框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)
Vue代码写在哪里？
- 传统开发模式：基于html/css/js文件开发vue
- 工程化开发方式：在
webpack环境中开发vue，这是最推荐, 企业常用的方式
@vue/cli 脚手架介绍
- @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
- 脚手架是为了保证各开发过程顺利进行而搭设的工作平台
@vue/cli的好处
开箱即用
0配置webpack
babel支持
css, less支持
开发服务器支持
@vue/cli安装
- 全局安装命令
yarn global add @vue/cli # OR npm install -g @vue/cli
- 安装全局环境后会有一个vue命令
src下的main.js
// 项目入口-webpack打包从这开始
import Vue from 'vue' // 引入vue源码
import App from './App.vue' // 引入App.vue文件模块
Vue.config.productionTip = false // 一个控制台打印的提示
new Vue({ // 实例化Vue(传入配置对象)
render: h => h(App), // 告诉vue渲染什么
}).$mount('#app') // '渲染到哪里
main.js和App.vue以及index.html作用和关系？
vue_主要的3个文件和关系
- main.js - 项目打包入口 - Vue初始化
- App.vue - Vue页面入口
- index.html - 浏览器运行的文件
- App.vue => main.js => index.html
*总结：*webpack打包App.vue到main.js，然后再把main.js插入到 index.html里，在浏览器页面展示出来
@vue/cli 单vue文件讲解
- 单vue文件好处, 独立作用域互不影响
- Vue推荐采用.vue文件来开发项目
- template里只能有一个根标签
- vue文件-独立模块-作用域互不影响
- style配合
scoped属性, 保证样式只针对当前template内标签生效- vue文件配合webpack, 把他们打包起来插入到index.html
