使用@vue-cli搭建Vue项目
安装Vue CLI
执行命令:
npm install -g @vue/cli
或者
yarn global add @vue/cli
创建vue项目
执行命令:
vue create vue-project-name
手动完成vue配置
修改项如下:
- please pick a preset: --> Manually select features
- check the feature needed for your projet: --> Babel && CSS Pre-processors && Linter /Formatter && Unit testing
- Pick a CSS pre-processor(PostCSS, Autoprefixer and CSS Modules are supported by default): --> Sass/SCSS (with dart-sass)
- Pick additional features: --> Lint and fix on commit
- Pick a unit testing solution: --> Jest
完整版与运行时版
两种版本对应文件名
以bootCDN内容分发网络(cdn)Vue3.2.0-beta.7版本为例:
- 完整版链接为:cdn.bootcdn.net/ajax/libs/v…
- 运行时版本链接为:cdn.bootcdn.net/ajax/libs/v…
两种版本区别
- 完整版:同时包含编译器和运行时的版本。
- 运行时版本:用来创建VUe实例、渲染并处理虚拟DOM等的代码。基本上就是除去编译器的其他一切。使用VUE-CLI创建的Vue项目默认使用运行时版本Vue。
- 编译器:用来将模版字符串编译成为JavaScript渲染函数的代码。
简单来说:完成版 == 运行时版本 + 编译器(compiler,体积占40%)
template和render用法
template
template只能在完整版Vue环境下(包含编译器)使用,语法实例如下:
new Vue({
template: '<div>{{ hi }}</div>'
})
render
在运行时版本Vue环境下,使用render实现编译器功能将js代码渲染到页面,语法实例如下:
new Vue({
render (h) {
return h('hi', this.hi)
}
)}
关于完整版与运行时版Vue的最佳实践
- 由于Vue运行时版本比完整版体积小,因此在用户端选择让用户客户端下载运行时版的Vue
- 为保证开发体验,开发者在vue文件中使用template而不使用render(h){}函数
- 同时在开发过程中使用webpack的vue-loader把vue文件中的template转为render(h){}函数
使用codesandbox.io等ide创建Vue工程文件
- 可以使用在线ide平台如codesandbox.io创建vue项目并下载到本地
- 可以使用本地ide如webstorm直接创建vue项目