Vue教程（二）使用vue-cli构建一个第一个vue项目

首先安装Vue脚手架（vue-cli）的环境

（环境的具体安装不在介绍，若连环境都设置不好，还是不要继续往下学了）

• 1 node.js ：从官网下载，一键安装就可以了
• 2 npm ：它和node一起安装，一般无需单独安装
• 3 使用淘宝镜像cnpm
  在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org进行安装
• 4 webpack，参照Vue教程（一）WebPack安装
• 5 安装vue-cli脚手构建工具npm install -g vue-cli

环境的各个版本

通过以上5步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目

新建一个文件夹newvue，在这个文件夹下创建项目

• 6 命令行CD到newvue文件 ，使用命令vue init webpack myvue来创建项目， myvue是项目的名称

PS E:\COLDDEMO\VueProject\newvue> vue init webpack myvue

? Project name myvue /项目名称
? Project description A Vue.js project//项目描述
? Vue build standalone
? Install vue-router? Yes //是否使用 Vue路由
? Use ESLint to lint your code? No//是否开启ESLint检测
? Set up unit tests Yes//是否使用单元测试
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "myvue".

项目初始化gif

项目创建完成后的目录：

image.png

package.json:文件是项目的描述文件
src:文件是项目源码文件
node_modules：是安装的项目依赖模块
build：是webpack的配置文件
config是项目的配置文件
index.html：是项目的入口页面

• 7 启动项目，输入：npm run dev

i项目启动.png

• 8 打开http://localhost:8080
  
• 9退出运行Ctrl + c