Vue脚手架

1. NPM

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以只要安装node.js就可以了，npm也包含在内一并安装好了。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。
安装node.js步骤

1.进入cmd命令面板，输入node -v检测是否安装，出现版本号则为安装成功。
2.如果没有安装则输入 node install 安装node
3.输入node -v检测是否安装，出现版本号则为安装成功。

淘宝的npm为cnpm
淘宝镜像安装
淘宝镜像官网

2.vue-cli

安装vue-cli官方脚手架步骤：分为全局安装和局部安装
局部安装
1、直接全局安装
npm install -g vue-cli
2、然后打开npm命令行工具，cd到你想要的某个目录中，并输入：
vue init
例：vue init webpack "sell-app"
配置脚手架
配置项目信息

• Project name: 项目名字
• Project description: 项目描述
• Author: 项目作者
• Vue build: 创建方式，直接回车选择官方推荐的
• Install vue-router?yes 是否引入vue路由，y

3、

• Use ESLint to lint your code?yes 是否引入eslint代码检查，是
• Pick an ESLint preset none esline风格，选无
• Setup unit tests with Karma + Mocha? no引入单元测试工具，否
• Setup e2e tests with Nightwatch? 引入自动化测试工具，否

配置完后会提示如何启动这个项目：
To get started:
cd app（进入项目文件夹）
npm install （安装所需依赖）
npm run dev （启动服务器）
自动打开项目页面
按照它的提示输入命令，一般只要输入进入文件下输入nmp run dev就可以
4、目录结构

• build：最终发布的代码存放位置。
• config：配置目录，包括端口号等。我们初学可以使用默认的。
• node_modules：npm 加载的项目依赖模块
• src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包* 含了几个目录及文件：
• assets: 放置一些图片，如logo等。
• components: 目录里面放了一个组件文件，可以不用。
• App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使components 目录。
• main.js: 项目的核心文件。
• static：静态资源目录，如图片、字体等。
• test：初始测试目录，可删除
• .xxxx文件：这些是一些配置文件，包括语法配置，git配置等。
• index.html：首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
• package.json：项目配置文件。
• README.md： 项目的说明文档，markdown 格式

5、在Cli 里创建组件，和引用组件
6、在components下创建组件：
7、在App.vue导入和应用组件：
8、最后执行 npm run dev，不能关掉命令框。