一、vue-cli介绍
vue-cli是一个脚手架工具,它集成了诸多前端技术,包括但不仅限于:
1、webpack
2、babel
3、eslint
4、http-proxy-middleware
5、typescript
6、css pre-prosessor
7、css module
这些工具,他们大部分都有依赖两个东西:
1、node环境:很多工具的运行环境
2、npm:包管理器,用于下载各种第三方库
二、安装node
下载node: https://nodejs.org/zh-cn/
验证安装
node -v
npm -v
配置源地址
默认情况下,npm安装包时会从国外的地址下载,速度很慢,容易导致安装失败,因此需要先配置npm的源地址
使用下面的命令更改npm的源地址为淘宝源
npm config set registry https://registry.npm.taobao.org
更改之后,查看源地址是否正确被修改
npm config get registry
三、 安装vue-cli
npm install -g @vue/cli
安装好之后,检查vue-cli是否安装成功
vue --version
vue-cli的使用
在终端中进入某个目录
选择一个目录,改目录将放置你的工程文件夹
搭建工程
vue create 工程名
注意:工程名只能出现英文、数字和短横线
安装依赖
工程搭建好后,在终端中进入工程目录
cd 工程名
npm i
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset:
default (babel, eslint)
> Manually select features
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel --兼容性配置
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
> In package.json
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
Use Yarn
> Use NPM
运行
npm run serve