Vue/cli 脚手架安装

最新推荐文章于 2024-09-11 14:08:41 发布

猕猴桃-HR

最新推荐文章于 2024-09-11 14:08:41 发布

阅读量156

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45677987/article/details/117980497

版权

vue 专栏收录该内容

105 篇文章 2 订阅

订阅专栏

1： vue/cli 脚手架安装

相对于Vue 开发还是 React 开发都是有对应的脚手架的。 cli：搭建项目的脚手架。

 开发大型项目, 那么就需要使用脚手架, 需要考虑代码目录结构, 项目结构和部署。 热加载,
 代码单元测试。

 CLI: Conmand-Line-Interface： 意为: 命令行界面。俗称脚手架

 Vue CLI 是vue 官方发布的vue.js 项目的脚手架
 使用 Vue CLI可以快速搭建Vue 开发环境以及对应的webpack 配置。 

 使用Vue/Cli 脚手架  前提就是就是安装node 环境。

 什么是NPM?
 NPM: 全称是Node Package Manager
 是nodejs 包管理工具和分发工具, 是非官方发布的Node 模块（包）的 标准。
 
 vue.js 官方脚手架工具就是使用了webpack 模板。
 对所有的资源进行压缩等优化操作,  他在开发过程中提供了完整的一套功能, 能够使得开发功能变得高效。
 -----------------------------------------------------------------------------------
 使用vue/cli 脚手架依赖: node 环境/ webpack 工具
1.1: 安装Vue/cli 脚手架
 
    命令: npm install -g @vu/cli;

1.2: 拉去vue2.0 版本
  运行命令: vue install -g @vue/cli init (拉去2.x 模板旧版本)
1.3： vue2.0 版本创建项目 运行命令;  vue init webpack + "项目名称"

    vue3.0 版本创建项目  运行命令： vue create + "项目名称"
---------------------------------------------------------------------------

1.4: 创建vue 项目过程中, 使用vue build 构建工具
   runtime + compiler  和 runtime-only: 区别

   runtime-compiler: 运行过程
  
   template ==> AST(抽象语法树) ==> render ==> vdom(虚拟dom) ==> ui (界面UI)

1.5: runtime-only
    运行过程:   render ==> vdom ==> ui (界面)

使用 runtime-complier 和 runtime-only 区别:

只有main.js 中不同:
-----------------------------------------------------------
使用runtime-compiler 中main.js 文件
 new Vue({
   el: "#app",
   components: {APP},
   template: <App/>,
 })
------------------------------------------------------------
使用runtime-only 中的 main.js文件
new Vue({
  el: "#app"
  render: h => h(App),
})
使用vue runtime-only: 优点:
1.1:  性能更高
1.2： 代码量更少
1.3:  体积小6kb,  体积更小。


new Vue({
  el: "#app",
  // render: h=>h(APP), 渲染函数的用法
  可以使用createElement 创建元素
  1: 普通用法
  createElemnt('标签', {标签的属性}, ['标签内容'])
  render: function(createElement) { 'h2',
    {class="box"},
    ['Hello, Raect', createdElement('Button', {}, ['按钮'])]
  }
})

render 函数还可以传一个组件,   
创建一个组件, render 函数还可以渲染
const cpn = {
  template: '<div>{{message}}</div>',
  data() {
    return{
      mesage: '我是组件message'
    }
  }
}
new Vue({
  el：'#app',
  // render 函数可以渲染组件
  return createElemnet(cpn)
})
------------------------------------------------------

同理; render 函数还可以渲染App 跟组件
new Vue({
  el:'#app',
  render: h=>h(APP);    h 函数; 就是createElement() 函数的简写。
})
---------------------------------------------------------
那么.vue 文件中的template 模板是由谁渲染？
.vue 文件中 template 模板就是要变成rende函数的, 是由 vue-template-compiler 进行编译的。
安装vue-loader 和 vue-template-compiler 
vue-loader: 加载Vue 文件, vue-template-compiler: 解析 .vue 文件中template 模板转成render 函数的, 

所以在main.js 文件中引入App 组件不是引入 .vue 文件,  而是引入被解析之后的App 对象。  
里边包含render 函数。
所以解析的每一个组件,  并不是一个 .vue 文件。 然后被解析之后render 函数。

vue 程序运行过程

在 vue 框架中 template 模板区域会进行解析（parse）解析成为： AST 抽象语法树。然后会进行编译：成render 函数。

通过render 函数渲染成VDOM，

vue 程序运行过程： template ==> ast（抽象语法树） ==> render(渲染函数) ==> vdom (虚拟DOM) ==> UI(界面ui)