vue-cli

10.1 vue-cli 简介

vue-cli 是官方提供的一个脚手架,可以快速生成vue的项目模板

主要功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

10.2 环境搭建

  • Node.js:http://nodejs.cn/download
    • 一直下一步,安装自己的目录下

确认 Node.js 安装成功

  • node -v 查看版本号
  • npm -v 查看版本号
    • npm 是一个软件包管理工具,和Linux下的apt软件安装类似。

安装 Node.js 淘宝镜像加速器(cnpm)

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 694 packages from 975 contributors in 1494.246s

安装后的位置:

C:\Users\Administrator\AppData\Roaming\npm

安装 vue-cli

cnpm install vue-cli -g

#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序,通常选择webpack
vue list

查看创建vue的模板

C:\WINDOWS\system32>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

至此 vue 程序安装完成

10.3 创建vue

创建基于 webpack 模板的 vue 应用程序

# myvue 是项目名称,可以根据自己的需求取名
vue init webpack myvue
  • 安装过程一直no就可以

vue-cli

初始化

cd myvue
#安装依赖环境
npm install
#启动当前vue项目
npm run dev

vue-cli

项目启动成功

上一篇:【Electron-Vue】入门学习笔记之二:NPM 和 CNPM 的使用及区别


下一篇:npm,cnpm和yarn的区别