vue 笔记
vue是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
安装(直接用 script 引入)
完整版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
非完整本
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.min.js"></script>
命令行工具 (CLI)
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
关于旧版本
Vue CLI 的包名称由
vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue --version
升级
如需升级全局的 Vue CLI 包，请运行：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
项目依赖
上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：
用法： upgrade [options] [plugin-name]
（试用）升级 Vue CLI 服务及插件
选项：
-t, --to <version> 升级 <plugin-name> 到指定的版本
-f, --from <version> 跳过本地版本检测，默认插件是从此处指定的版本升级上来
-r, --registry <url> 使用指定的 registry 地址安装依赖
--all 升级所有的插件
--next 检查插件新版本时，包括 alpha/beta/rc 版本在内
-h, --help 输出帮助内容
使用vuecli搭建vue项目
安装@vue/cli完成后使用一下命令创建项目
运行
vue create 项目名称
项目创建完成后
cd 到项目目录中
然后运行
yarn serve
出现下面的字样及成功
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.104:8080/
完整版和运行时版本的区别
| vue完整版 | vue非完整本 | 评价 | |
|---|---|---|---|
| 特点 | 有compiler | 没有compiler | compiler占40%体积 |
| 视图 | 写在html里或写在template选项里 | 写在render函数里用h来创建标签 | h是尤雨溪写好传给render函数的 |
| cdn引入 | vue.js | vue.runtime.js | 文件名不同，生产环境后缀.min.js |
| webpack引入 | 需要配置alias | 默认使用此版本 | 尤雨溪配置的 |
| @vue/cli引入 | 需要额外配置 | 默认使用此版本 | 尤雨溪配置的 |
最佳实践
总是使用分完整版，然后配合vue-loader和vue文件
- 保证用户体验，用户下载js体积更小，但只支持h函数
- 保证开发体验，开发者可以直接 在vue文件中写html，而不写h函数
- 用vue-loader把vue文件中的html传给h函数
完整版正tmplate的写法
new Vue({
el: "#app",
template: `<div>{{ n }}</div>`,
data: {
n: 0
}
})
非完整版中render的写法
import Add from './Add.vue'
new Vue({
el: '#app',
render(h) {
return h('div', [this.n, h('button', { on: { click: this.add } }, '+1')])
}
// render(h) {
// return h(Add)
// }
, data() {
return {
n: 0
}
},
methods: {
add() {
this.n += 1
}
}
})
可以重用 codesandbox.io 快速创建vue项目
- 点击create Sandbox
- 点击创建vue项目
- 完成
- 导出
