vue-cli 更新对比




vue-cli 更新对比

Vue-cli 是Vue 官方提供的脚手架工具,他的github 地址是:
vue-cli github
vue-cli 3.0发布了,相对比于2.0,更新挺大的。本文简单介绍了下初采坑的一些区别

vue-cli 2.0以上

下载安装

npm install vue-cli -g
  
  
  • 1

查看版本

vue -V
// 2.9.3 说明是2.9.3版本(在写此篇文章时,npm 上是2.9.3最新版本,3.0测试版安装方式不同,请往下看)
  
  
  • 1
  • 2

接下来介绍一些2.0以上中的命令

vue help
//或者
vue --help
// 查看vue 帮助

vue list //查看vue 模板列表

vue init <template-name> <project-name> 初始化 vue 项目

  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

下面是以webpack模板创建项目完成后的目录结构:

image

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

npm install 

npm run dev
  
  
  • 1
  • 2
  • 3

vue-cli 3.0

写此篇文章时 vue-cli 3.0 测试版刚发布,所以安装方式有所不同

下载安装

npm install -g vue@cli
  
  
  • 1

查看版本

vue -V
//或者
vue --version
// 3.0.0-beta.1 说明测试版本安装成功
  
  
  • 1
  • 2
  • 3
  • 4

3.0 中的命令

vue --help // 查看帮助,删除了 vue help
// 还删除了vue list

  
  
  • 1
  • 2
  • 3

创建新项目

vue create <your project> 
//注意:现在已经不是选择模版了,而是presets (预设)首先是问你是否使用默认的preset 还是手动配置功能
  
  
  • 1
  • 2

注意
创建项目的方式改变,创建完成的项目也就不一样;但是,并不是说2.0 的 vue init 方式取消了;如果还想使用;则需要安装 @vue/cli-init;执行 npm install @vue/cli-init;

新版本创建项目的项目目录:

新版本创建项目的项目目录

安装完成之后进到项目根目录,启动项目:

npm run serve 
  
  
  • 1

注意 启动方式改变了,并且也不需要 npm install 了
还有就是发现目录结构简单多了,原因在于package.json:

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build", 
    "lint": "vue-cli-service lint" 
}
  
  
  • 1
  • 2
  • 3
  • 4
  • 5

vue 学习 react-scripts 搞了一个vue-cli-service 啊
上面三个命令分别是启动开发服务,打包,和格式化代码
之前的config目录哪里去了?build 的目录哪里去了?webpack 的配置呢
可能这就是vue-cli3.0号称的0配置吧
那么我们怎么配置呢?
要请出我们的vue.config.js(模仿于angular-cli脚手架创建项目的配置)
具体如何配置请移驾官方文档查看!
官方配置文档






vue-cli 更新对比

猜你喜欢

转载自blog.csdn.net/qq_34531925/article/details/80677724