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就可以
初始化
cd myvue
#安装依赖环境
npm install
#启动当前vue项目
npm run dev
项目启动成功