vue-cli升级@vue/cli更新对比?

    互联网/前端 52次点击 · 1126天前 · xixi喵
WPS演示快捷键大全?Word首行缩进快捷键怎么用? xixi喵

1条回答我要回复

    晴天1126天前

      编者:之前学习vue脚手架vue-cli,是2.5版本的,今天打开官方文档,已升级到3.0;这次更新变化挺大,本文简单介绍下安装和升级最新版的区别。
       
      vue-cli 2.0以上下载安装npm install vue-cli -g查看版本vue -V
      // 2.9.3 说明是2.9.3版本(在写此篇文章时,npm 上是2.9.3最新版本,3.0测试版安装方式不同,请往下看)接下来介绍一些2.0以上中的命令vue help
      //或者
      vue --help
      // 查看vue 帮助

      vue list //查看vue 模板列表

      vue init <template-name> <project-name> 初始化 vue 项目下面是以webpack模板创建项目完成后的目录结构:

      然后在创建的项目根目录下npm install

      npm run dev
      vue-cli 3.0写此篇文章时 vue-cli 3.0 测试版刚发布,所以安装方式有所不同
      下载安装npm install -g vue@cli查看版本vue -V
      //或者
      vue --version
      // 3.0.0-beta.1 说明测试版本安装成功3.0 中的命令vue --help // 查看帮助,删除了 vue help
      // 还删除了vue list创建新项目vue create <your project>
      //注意:现在已经不是选择模版了,而是presets (预设)首先是问你是否使用默认的preset 还是手动配置功能注意 
      创建项目的方式改变,创建完成的项目也就不一样;但是,并不是说2.0 的 vue init 方式取消了;如果还想使用;则需要安装 @vue/cli-init;执行 npm install @vue/cli-init;
      新版本创建项目的项目目录:

      安装完成之后进到项目根目录,启动项目:npm run serve 注意 启动方式改变了,并且也不需要 npm install 了 
      还有就是发现目录结构简单多了,原因在于package.json:"scripts": {
      "serve": "vue-cli-service serve --open",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
      }vue 学习 react-scripts 搞了一个vue-cli-service 啊 
      上面三个命令分别是启动开发服务,打包,和格式化代码 
      之前的config目录哪里去了?build 的目录哪里去了?webpack 的配置呢 
      可能这就是vue-cli3.0号称的0配置吧 
      那么我们怎么配置呢? 
      要请出我们的vue.config.js(模仿于angular-cli脚手架创建项目的配置) 
      具体如何配置请移驾查看! 
       

    请先登录后,再回复