vue/cli3.0首次接触

 

首先查看官方文档

https://cli.vuejs.org/zh/guide/

稍微了解一下后开始接触vue/cli3.0 如果之前已经安装了2.0先使用npm 命令卸载2.0

1. 安装vue/cli3  使用命令：npm install -g @vue/cli
2. 使用命令生成一个基础项目：vue create myproject
3. 使用命令： npm run serve运行项目

注：①与vue-cli2相比少了两个配置文件夹，但依旧可以进行手动配置，在根目录下创建vue.config.js文件，这个文件一旦存在就会被@vue/cli-service自动加载。

②可以使用vue ui命令创建和管理项目，

通过官方文档了解到本次手脚架的两个特性。

1.有一套完全图形化的创建管理用户界面。

2.一个运行时依赖 (@vue/cli-service)，该依赖：

• 可升级；
• 基于 webpack 构建，并带有合理的默认配置；
• 可以通过项目内的配置文件进行配置；
• 可以通过插件进行扩展。

3相比起2少了两个配置的文件夹，所以配置都去了哪里。

在看文档的过程中，我们知道可以使用命令进行简单的配置指定参数。比如npm run serve和npm run dev这个l两个指令。

在默认 preset 的项目的 package.json中，npm scripts 以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

除了这种简单的配置还有另外一种方法。在根目录下创建vue.config.js文件。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

详细参数查看官网。https://cli.vuejs.org/zh/config/#vue-config-js

Babel语言标准