什么是vue-cli
vue-cli 是官方提供的一个脚手架,用于快速生产一个vue的项目模板
预先定义好的目录结构及基础代码,就好比我们在创建Maven项目时可以选择创建一个骨架项目 这个骨架项目就是脚手架,让我们的开发更加的快速
需要的环境
- Node.js : http://nodejs.cn
- git
确认Nodejs安装成功:
- com 下输入 node -v ,查看是否能正确打印出版本号即可!
- cmd 下输入 npm -v ,查看是否能正确打印出版本号即可!
安装Node.js 淘宝镜像加速器 (cnpm)
这样子的话,下载会快很多
# -g 就是全局安装
npm install cnpm -g
安装的过程可能有点慢!虽然安装了cnpm 但是尽量少用!
安装 vue-cli
cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建vue 应用程序,通常我们选择webpack
vue list
第一个 vue-cli 应用程序
1.创建一个Vue项目,我们随便建立一个空的文件夹在电脑上
2.创建一个基于webpack模板的vue 应用程序
#这里的myvue是 项目名称 可以根据自己的需求起名
#在需要创建项目下的路径输入
#如果cmd太慢的话 我们还可以使用 git bash 创建
vue init webpack myvue
一路选择no即可
说明:
- Project name : 项目名称,默认 回车 即可
- Project description :项目描述 ,默认 回车 即可
- Author :项目作者 默认 回车 即可
- Install vue-router :是否安装vue-router ,选择n不安装(后期需要在手动安装)
- Use ESLint to lint your code :是否使用ESLint 做代码检查,选择 n 不安装(后期需要在手动安装)
- Set up unit tests : 单元测试相关 ,选择 n 不安装(后期需要在手动安装)
- Setup e2e tests with Nightwatch :单元测试相关 ,选择 n 不安装(后期需要在手动安装)
- Should we run
npm install
for you after the project has been created :创建完成后直接初始化,选择 n 我们手动执行;运行结果
初始化并运行
初始化
cd myvue
npm install
执行完成后,目录多了更多依赖
运行
npm run dev
运行完成后就可以访问了
http://localhost:8080