vue-cli3.0搭建vue项目的简单入门

前言：

Vue CLI 是 Vue 应用的标准化构建工具（链），核心是提供基于 webpack 4 构建的预配置构建设置，目标是最大限度地减少开发者必须经历的配置过程。因此，Vue CLI 3 对具备以下特点的项目都支持开箱即用：

• 预配置的 webpack 功能，如模块热替换、代码分割、 摇树优化（tree-shaking）、高效持久化缓存、错误覆盖等；

• 通过 Babel 7 + preset-env 对 ES2017 进行转换和基于使用情况的 polyfill 注入

• 支持 PostCSS（默认启用 autoprefixer）和所有主要的 CSS 预处理器

• 具有 hashed asset link 和预加载/预取资源提示的 Auto-generated HTML

• 通过 .env 文件的模式和级联环境变量 

• 现代模式：并行发布原生 ES2017 +bundle 和传统 bundle

• 多页面模式：构建具有多个 HTML / JS 入口点的应用程序

• 构建目标：将 Vue 单文件组件构建为库或原生 Web 组件

准备工作：

目前使用的vue-cli的版本大多是2.9.6，因此需要升级vue-cli的版本：

npm install -g

查看 vue-cli的版本，确认已经升级为3.0

vue-cli3.0为我们提供了许多便捷的功能，如下：

1.vue-cli3.0支持在创建项目时，配置自定义的工具集成模板：

（1）在这里你可以选择默认的模板（即只包含，babel，eslint），或是自定义你项目中所需要的工具，并且vue-cli3.0可以将你自定义的模板保存下来，之后再创建新项目时可以重复利用：

（2）这里我选择重新定义一个模板：

将模板保存：

开始创建项目：

 

（2）vue-cli3.0 图形化工具 vue GUI

输入vue ui 即可启动vue-cli3.0中的图形化工具：

（3）插件安装命令： vue add 插件名，例如： vue add vuetify(一款与vue结合的ui框架,具体体安装过程可参照下图步骤，可以媲美国内的elementui)

 

对于一些工具，普通插件的安装，也还是可以使用npm/tnpm/cnpm install -g 工具名，

例如： npm install axios -g

 

(4) 配置vue.config.js 启动命令，实现跨域请求

（5）vue-cli3.0支持创建全局变量

新建后缀是.env 或者.env.development文件，在文件中定义全局变量：

命名规则是：VUE_APP_名称，例如，在.env文件中，定义一个url的全局变量：

VUE_APP_URL = ‘http://www.dev.com/api’；

在项目的main.js文件中打印：

注：利用这个全局变量还可以实现其他的功能，这个后续会进行相关介绍（在这里埋个笔(#^.^#)）

（6）vue-cli3.0支持运行单个vue文件，而不需依赖于配置好路由通过App.vue，启动主vue文件查看

运行命令： vue serve 单个vue文件名称 ，例如： vue serve Hello.vue

注意：如果提示没有vue serve命令，则需要全局安装vue serve命令：

npm install -g vue serve