Vue工程创建相关知识点

200 阅读2分钟

使用@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版本为例:

两种版本区别

  • 完整版:同时包含编译器和运行时的版本。
  • 运行时版本:用来创建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的最佳实践
  1. 由于Vue运行时版本比完整版体积小,因此在用户端选择让用户客户端下载运行时版的Vue
  2. 为保证开发体验,开发者在vue文件中使用template而不使用render(h){}函数
  3. 同时在开发过程中使用webpack的vue-loader把vue文件中的template转为render(h){}函数

使用codesandbox.io等ide创建Vue工程文件

  • 可以使用在线ide平台如codesandbox.io创建vue项目并下载到本地
  • 可以使用本地ide如webstorm直接创建vue项目