Vue(第四天)

Vue:第一个Vue-Cli项目

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、 什么是Vue-Cli？

示例：vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板。
预先定义好的目录及基础代码，就好比咱们的maven项目可以选择创建一个骨架项目，这个骨架项目就是架手架，可以让我们更快速的开发。

主要功能:

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

二、需要环境

node.js

1. 安装无脑下一步
2. 确认node.js安装成功：
3. cmd下输入node -v，查看是否能打印正确版本号
4. cmd下输入npm -v，查看是否能打印正确版本号

这个npm，就是一个软件管理工具，就和Liunx下的app软件安装一样。
1、安装Node.js淘宝镜像加速器（cnpm）

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

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

2、安装vue-cli

cnpm install vue-cli -g

# 测试是否成功
# 查看可以基于那些模板创建vue应用，通常我们选择webpack
vue list

第一个Vue-cli应用程序

• 创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我们在D盘下新建一个目录

D:\idea_code\vue\vue-study

• 创建一个基于webpack模板vue应用程序

# 这里myvue是项目名称，可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可。
说明：

• Project Name：项目名称，默认回车即可
• Project description：项目描述，默认回车即可
• Author：项目作者：默认回车即可
• Install vue-roter：是否安装vue-roter，选择n不安装（后期需要自己添加）
• Use ESLint to lint your code：是否选择使用ESLint做代码检查，选择n不安装（后期自己添加）
• Set up unit test：单元测试相关，选择n不安装（后期需要自己添加）
• Set 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

执行完成后，目录多了很多依赖：