Vue-cli 脚手架搭建

一般我们平常做小练习的时候，可以引入vue.js使用vue，但是一般做项目的时候，我们大都会用到vue脚手架，脚手架也是vue里重要的一部分，今天我们就来看看vue脚手架的相关：

1.环境搭建

1、安装node.js（傻瓜式安装，这里不再描述）
2、安装webpack 打开命令行工具输入npm install webpack -g,安装成功后输入webpack -v,会出现对应版本号，则表示安装成功：

4、安装vue-cli脚手架构建工具，在命令行输入：npm installl vue-cli -g,安装完成后输入vue -V（vue查看版本号用的是大写的V！！！），出现对应的版本号，则安装成功：

2. 用vue-cli构建项目

1、首先新建一个存放项目工程的文件夹，并在该目录下打开命令行。
2、vue init webpack myvuecli输入安装vue脚手架，注意这里的“myvuecli”是项目的名字，可以说是随便的起名，但是不能用中文！！！
下来会出现一些命令让你选择Y/N，下面大概列出来几个：

$ vue init webpack myvuecli --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 myvuecli
? Project name (myvuecli) ---------------------项目名称
? Project description (A Vue.js project) ---------------------项目描述
? Author Datura --------------------- 项目创建者
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，根据需要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no，如果选择则会对语法要求特别严格，
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm run dev

3、我们根据提示，进入创建的工程目录，cd myvuecli，
4、安装好以后，我们打开项目文件夹，就会出现如下：

图片.png

5、启动项目npm run dev

服务启动成功后打开提示的地址会出现一个“欢迎页面”，如下图：

这里提示一下：在项目进行时，命令行窗口不要关闭，窗口关闭后项目就不能在网页显示，还有，每次启动项目只需要输入npm run dev