码云前端开发 2019-02-11

[Vue教程]认识vue-cli脚手架工具

今天带领大家认识一下 vue-cli（Vue 脚手架）这个工程化工具，本章内容我们要学习几个主要内容：

快速创建工程的两种方法
工程化项目目录

打开终端工具，用命令 node -v 看一下你的 node 版本和命令 npm -v 看一下 npm 版本是否一致，或者说 node 版本高于 8 的，npm 版本高于 6 的。

然后怎么样全局安装 vue-cli 工具呢？用命令

npm install -g @vue/cli

这里我再插入一句，我之前一直用的 vue-cli 版本是 2.9.6 的，所以在升级到 vue3.0 的时候踩了点坑，为了避免大家和我一样踩不必要的坑，我从 vue2.0s 升级升级到 vue3.0 的方法写一下，希望对大家有个帮助，第一次成功安装的就可忽略过，这个方法只针对想要升级到 vue3.0 的小伙伴。

1、卸载之前安装的 vue-cli

npm uninstall vue-cli -g

2、然后安装新的 vue-cli

npm install -g @vue/cli

但是呢，有的小伙伴会发现操作了没用，卸载重装，然后创建时照样是之前的旧版本，这是怎么回事呢？我反反复复试了好多次，终于发现问题的根源。
把 vue-cli 安装在 npm 的全局模块的存放路径的默认路径下，即： “C:\Users\Administrator\AppData\Roaming\npm”，但是安装之后把默认路径改了，然后一直在新的路径下卸载新增。
解决方法：
先将路径改为默认路径，卸载之后再改回来，如图：

我们怎么创建 vue 工程呢？很简单首先你要进入要创建工程的目录里去，用命令 cd 目录名，比如这里是我在本地创建的：

cd demo

然后使用命令：

vue create hello-world

这里强调一下，创建项目名是可以使用短横线“-”或者是下划线连接的小写字母创建。

然后回车就会出现一些 cli 工具的选项，按键盘上下键选择默认（default）还是手动（Manually），如果说使用 default 模式的话，一路回车执行下去就行了，它就会给大家创建一个默认选项的一个工程，（注：现在 vue-cli3.0 默认使用 yarn 下载），这里我选择手动是为了给大家演示。

回车，大家就会发现有很多选项，新手可能会有点蒙圈，这改如何选择呢？不用担心，这里我会一一给大家详细解释一下它们代表的意思。

你要集成什么就选就行了，我这里选个我比较常用的（注：空格键是选中与取消，A 键是全选）。

我们把常用的几个组件安装一下，比如路由组件 Router，状态控制 Vuex 组件，CSS 预编译组件 CSS Pre-processors，Linter / Formatter 规范类型，或者 Unit 测试方式，E2E 测试方式。

我的安装方式：

回车，它问是否使用历史？我们选择 yes

选择 css 预处理，我们选择 sass，回车

ESLint 代表我们平时写代码的时候，会有一些规则，让我们的代码写的更优美，我建议大家选择 ESLint + Standard config 或者 ESLint + Airbnb config 这样一个配置，我们先选 ESLint + Airbnb config 等会看一下它有什么作用

这里在对我们 js 代码保存检测的时候有两个选择：Link on save 表示是在保存的时候对我们的 js 代码做一个检查呢，还是说 Link and fix on commit 表示你是在提交一个更新的时候做一个检查。我们默认选择当我们保存的时候

然后选择默认，是否要保存未来的项目，就是刚才选择的 default 或者是 Manually，如果这里你选择 yes，你今后创建的项目都会按照你刚刚手动选择配置去创建项目，如果说你不需要这样，你就选择 no，我建议大家选择 no。

然后它就会按照我们刚才的选项配置去加在一些插件依赖，然后会形成我们需要的这个项目到我们 create 的 hello-world 中

这个创建过程需要点时间，如果网络快的话，这个过程是很快的，同样，如果大家在这个地方安装比较慢的话，可以使用 Ctrl+c 取消它，然后 cd 到安装的这个 hello-world 目录，利用淘宝镜像 cnpm 安装。

如上图我们的这个项目就安装成功了，使用下面两个命令就可以让我们的项目跑起来：

cd hello-world
npm run serve

首先使用 cd hello-world 进入我们的项目目录，然后使用 npm run serve 这样我们的项目就跑起来了：

运行成功后，会提醒你你的项目已经运行到了 localhost：8081 这个端口。

这样我们就创建成功一个 vue 工程了，我们在页面上看一下：

这是第一种去使用 vue create 命令去新建 vue 工程化项目的一个方式，那么第二种方法呢就是使用 vue ui 这个命令，很简单，在你的终端工具使用这个命令。

vue ui

然后我们粘贴这个 localhost:8000 到我们的浏览器中，大家就可以看到我们当前的工作目录在哪里。

选择“创建”创建一个新的项目，点击“在此创建新项目”

我们选择项目的名称为 hello-ui，然后选择包管理器，比如说我们选择 npm，其他的作为默认的配置项，保存一下。

然后下一步，这个呢和我们使用命令 vue create 一样，我教大家使用手动的方式配置项目。

下一步，我们看一下 cli 为大家添加了那些配置工具或者说有哪些可选的配置工具，比如我们要用到路由组件、状态管理组件 vuex、css 预编译组件，推荐大家把这个“
使用配置文件”选项勾选，这样的话前面的配置项就会形成单独的文件里面去。

下一步，选择预编译器 sass，然后 ESlint 配置文件选择默认的或标准的这个配置文件，点击创建项目。

点击创建项目后会出现一个保存为新预设，这个表示我们刚才的这个配置它会保存为一个预设的名字，到我们后来创建项目的时候可以使用这个预设快速的创建我们的工程化项目。

我们给它命名为 vuex+router，保存预设并创建项目。这个过程它其实得到了项目的文件目录和文件名，和我们前面使用 vue create 命令行工具的操作得到的项目是一样的。

当项目创建成功之后，我们会得到这样一个页面。

大家可以在页面左边菜单栏看到我们刚刚配置的一些插件、依赖等信息

打开我们刚才用命令行和 UI 工具形成的这个目录，有 public 文件夹和 src 文件夹这样的一个文件夹，src 里面放的是源文件，public 里面就是一些公共文件公共资源，node_modules 是我们的前端依赖。

index 文件是我们的项目入口，里面有一个 id 为 app 的 div：

<body>
    <noscript>
      <strong>We're sorry but hello-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

在 main.js 中，把 vue 对象或者是实例绑定到 app 上面来，而且它还加载了这么几个文件，router 我们在前面选择组件的时候选择一个 router 和 vuex 组件，store 就是 vuex 组件，它其实是帮助我们管理组件之间的一个状态。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views 文件夹相当于页面上的视图，里面有 home、about 两个文件。

项目是怎么运行起来的呢？这里有一个 package.json 文件，它相当于是对整个项目解释说明的一个文件，包含项目名称，版本号，然后它里面一些打包使用的依赖，开发所使用的一些依赖，以及它们对应的版本，在这个文件里写的都特别清楚。特别注意这里面有个 scripts，这个是我们开发使用到的一些命令，比如说我们 npm run serve 相当于把项目运行起来了，还有 npm run build 这个命令，都是用 npm run 加上中间这个关键词 serve、build 来运行起来的。

{
  "name": "hello-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.21"
  }
}

这里带大家简单的认识一下，后面我还会具体介绍，这里大家需要记住有这么几个关键目录，public 目录，src 目录，还有就是 package.json 文件。其他的文件都是些配置性的文件大家做个了解即可。

总结

通过本章大家要掌握快速创建工程的两种方法，vue create 命令，UI 界面去创建我们的工程，然后就是它创建的这个工程的目录结构，重点就是组件目录以及 package.json 文件。

「点点赞赏，手留余香」

赞 7 赏

给作者打赏，鼓励TA抓紧创作！