2025年vue安装不上（vuecli安装不成功）

cli，俗称脚手架。全称是command line interface. vue-cli 是vue官方发布的开发vue项目的脚手架。

在生活中，脚手架是我们为了建房子搭的架子。为了我们建房子做的准备工作。同样，cli，就是为了我们开发项目，搭建环境。它的作用主要是

搭建Vue开发环境。
配置webpack。尤其是这个。之前我们都是手动配置webpack。首先是特别的繁琐，而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli，他会自动帮助我们配置webpack。

webpack.vue-cli使用了webpack的模板所以我们需要安装webpack
node webpack又依赖node所以我们也需要安装node

脚手架全局安装即可，没必要局部安装，这样安装的是脚手架3的版本，如果想使用cli2的内容我们需要再拉一个模板

命令是

Project name --项目的名称，默认使用刚刚init的my-project-name（my-project-name其实这个应该是项目文件夹的名称）
Project description 项目的描述
Author 作者默认会去电脑中的.gitconfig去找作者名
Vue build 选择vue的版本是使用runtime+compiler还是使用runtime+only.
Install vue-router? 是否安装前端路由
Use ESlint to lint your code? 是否使用ESlint来规范你的代码
Set up unit tests 是否设置单元测试
Setup e2e tests with Nightwatch 是否设置端到端测试
使用npm还是使用yarn

配置好后将会为我们生成一系列的文件。这些文件很多我们之前都自己手动实现过，但是这个脚手架工具可以自动帮助我们生成，就很牛皮。

大小不同，runtime+compiler更大，多出来的部分就是compiler的代码，这部分代码是用来编译template模板的。
性能不同，runtime-only的性能更高

要了解runtime-only为什么会性能更高，需要了解template的编译过程。

vm.options.template--->ast.第一步，将template解析（parse）为抽象语法树
ast--->render函数（将我们的ast编译成render函数）
render函数--->virtual dom(将render函数渲染（render）成虚拟DOM)
vitual dom --> 真实dom（将虚拟dom挂载到页面中）

实际上刚刚runtime+compiler多出来的代码就是来帮我们编译模板的，也就是完成我们的第一，第二步。将我们的template模板编译成render函数。
但是其实实际项目中，如果我们使用.vue文件开发.我们的vue版本根本不需要实现compiler，原因是什么呢？
前面我们讲过webpack可以通过安装两个东西帮我们打包.vue文件，一个是vue-router，一个是vue-template-compiler.vue-router是帮我们加载.vue文件，**而vue-template-compiler是来将我们.vue文件中的template编译成render函数。**也就是实际上通过webpack打包，导出的组件根本不存在template.因为它的template已经编译成了render函数。换句话说，你从任何.vue文件导出的组件，模板已经编译好了根本不需要你实现。你只需要完成后面两步就行了。这里我们可以输出一下我们的组件到底是个什么。 这个组件已经被处理成了一个普通的object对象。而并不存在template模板。并且这里我们可以发现他有一个render方法。

当我们使用.vue文件开发vue的项目的时候，实际上输出出来的组件已经被渲染成了render函数，所以我们的vue不需要对模板进行编译，我们应该选择runtime-only的版本，这样代码更少，性能更高。但是当我们开发vue项目是使用template模板的形式，我们就需要安装runtime+compiler的版本，帮助我们解析template。

零配置，之前关于webpack的配置全部被隐藏。
vue-cli2基于webpack3，vue-cli3基于webpack4
移除static文件夹，添加了public文件夹，并且将index.html 移入public文件夹
vue-cli3提供了命令，提供可视化配置

使用vue-cli3初始化vue项目，是下面这个命令

生成这么多配置选项

以前是命令而现在是命令，原因是package.json的scripts发生了变化。
main.js有了小许不同
vuecli3的main.js:

vuecli2的main.js:

其实本质上他们是一样的，vue的源码会判断你的vue实例是否存在el属性，如果存在，就将实例挂载到该元素上面。vuecli3的代码就是直接将实例挂载到元素上。

当我们使用vue-cli3生成项目之后，webpack的配置就被隐藏了。如果想查看或者修改webpack的相关配置该怎么办呢？

vue ui。之前我们说过，vuecli3脚手架通过vue ui命令帮助我们实现了图形化管理。原理是创建了一个本地服务器，我们可以在本地服务器中导入我们的vue项目，里面会有一系列配置可以进行配置。
找到隐藏的配置文件。路径是这个webpack.config.js本身也没啥东西，他是导入文件夹的内容。
如果想对webpack配置文件进行修改的话，可以在自己的项目中新建一个文件：vue.config.js。这个名字是固定的不能随便命名。你可以在这个文件中对webpack进行配置，到时候他会将你的配置和它隐藏的配置合并。

2025年vue安装不上（vuecli安装不成功）

相关推荐