vue的学习-脚手架vue-cli

vue-cli搭建开发环境

1.安装vue-cli,在这里首先确保电脑已经安装了node,我们使用npm安装:

npm install veu-cli -g

-g表示全局安装。如果网络太慢可使用cnpm进行安装。

完成之后可以用 vue-V进行检查是否安装成功，成功后会显示其版本号。注意 ：V是大写

2.初始化项目，使用vue init

vue init <template-name> <project-name>

<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，

webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。

webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。

browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

simple-一个最简单的单页应用模板。

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。

在实际开发中，一般使用webpack这个模板，则安装这个模板，使用以下的命令：

vue init webpack snackPOS

之后，会出现一些询问的选项，我们按要求回复即可。

完成后会出现三句命令提示：

（1）cd snackPOS   进入项目目录

（2）npm install      安装项目依赖包

（3）npm run dev    运行程序，我们输入提示的地址时，出现以下的页面，则我们初始化已经完成。

vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。

ps：这是构建好的目录。