Vue-cli

Vue-cli

概述

vue-cli 是官方提供的一个脚手架，用于快速生成一个 vue 的项目模板。

预定义好的目录机构及基础代码，就好比咱们在创建 maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，使我们的快发更加快捷。

主要功能

• 统一目录结构

• 本地调试

• 热部署

• 单元测试

• 继承打包上线

需要的环境

• Node.js：http://nodejs.cn/download/
  安装无脑下一步就好，安装在自己的环境目录下

• Git：https://git-scm.com/downloads/
  镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功

• cmd 下输入 node -v 查看是否能够正确打印版本号

• cmd 下输入 npm -v 查看是否能够正确打印出版本号

这个 npm 是一个软件包管理工具，就和 Linux 下的 apt 软件安装差不多！

安装 Node.js 淘宝镜像加速器（cnpm）

这样的话，下载会快很多

# -g 就是全局安装
npm install cnpm -g
​
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

 

安装过程可能有点慢~，请耐心等待！虽然安装了 cnpm，但是尽量少用

安装目录： C:\Users[用户名]\AppData\Roaming\npm

安装 vue-cli

cnpm install vue-cli -g
​
#测试是否安装成功
#查看可以基于哪些模板床架 vue 应用程序，通常我们选择 webpack
vue list

 

第一个 vue-cli 应用程序

1. 创建一个 vue 项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘新建一个目录 D:\JAVA_HOME\Vue\vueProjects\myVue

2. 创建一个基于 webpack 模板的 vue 应用程序

   # 这类的 my-vue 是项目名称，可以根据自己的需求命名
   vue init webpack my-vue

    

3. 一路选择 no 即可

说明：

• Project name ：项目名称，默认 回车即可

• Project description：项目描述，默认 回车即可

• Author：项目作者，默认 回车即可

• Install vue-router：是否安装 vue-router，选择 n 不安装（后续需要时手动添加）

• Use ESLint to lint your code ：是否使用 ESLint 做代码检查，选择 n 不安装（后续需要时再手动添加）

• Should we run npm install for you after the project has been created ：创建完成后直接初始化，选择 n 我们手动执行

运行结果

初始化并运行

cd my-vue
npm install
npm run dev