构建一个Vue项目
方法一：使用@Vue/cli
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，
- 通过 @vue/cli 实现的交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建
vue create hello-world
选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。进入目录后运行yarn serve 可以打开webpack-dev-server
使用图形化界面
通过 vue ui 命令以图形化界面创建和管理项目
方法二：从零搭建一个Vue项目
使用webpack或者rollup，适合有经验者
方法三：使用codesandbox.io
点击create sandbox
截屏2022-08-19 09.43.06.png
选择Vue3
截屏2022-08-19 09.45.27.png
即可快速得到一个配置好的vue项目，如果想转到本地编辑，选择导出源码压缩包，解压后即可在本地编辑。在package.json里可以看到如何运行
截屏2022-08-19 09.47.02.png
Vue的两个版本
vue.js和vue.runtime.js
方法一：从HTML里直接得到视图
（完整版）
从CDN引用vue.js或者vue.min.js可以做到
也可以通过import引用vue.js或者vue.min.js，MVC的视图没有写在js里面，直接写在页面里
方法二：使用JS构造视图（非完整版）
引入vue.runtime.js
二者的区别
截屏2022-08-19 11.53.37.png
// 需要编译器 完整版
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器 非完整版
new Vue({
render (h) {
return h('div', this.hi)
}
})
tips：最佳实践:总是使用非完整版，然后配合vue-loader和vue文件。
1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数。
2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数。
3.脏活让loader做，vue-loader把vue文件里的HTML转为h函数。 这样你就可以不写h函数也能得到h函数。
网友评论