Vue-第一个vue-cli项目

Vue-第一个vue-cli项目

十、第一个vue-cli项目

1、什么是vue-cli？

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；
  预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

功能：

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

2、需要的环境

• Node.js：http://nodejs.cn/download/
  安装就是无脑的下一步就好，自己选择安装路径
• Git：https://git-scm.com/doenloads
  镜像：https://npm.taobao.org/mirrors/git-for-windows/

Node.js会自动配置环境变量，在cmd命令行直接输入node - v查看是否安装成功，打印出版本号即成功！

cmd命令行直接输入node - v查看软件包管理工具是否安装成功！

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

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

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

• 安装vue-cli

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

3、第一个vue-cli程序

• 创建一个Vue项目文件夹
• 命令行进入项目文件夹（可以在文件夹目录按住shift然后右键进入shell命令行、也可以在目录行输入cmd回车）
• 创建一个webpack模板的vue应用程序

# 记得进入项目文件夹创建
# 这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

安装说明：

* Project name：项目名称，默认回车即可
*　Project description：项目描述，默认回车即可
* Author：项目作者，默认回车即可
* Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
*　Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
* Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
* Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
* Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

• 初始化并运行

cd myvue	 #进入项目
npm installl #下载相关插件
nom run dev	 #启动程序

• 可以在浏览器中输入启动后的地址访问我们的第一个程序！！