使用vue-cli脚手架搭肩webpack项目

一、准备工作

1. 安装好node
使用homebrew安装node
显示：



则安装成功

2. 安装好webpack
终端输入
• g表示全局安装

3. 安装vue-cli
终端输入
显示:



则安装成功

二、用vue-cli构建项目

1. 生成项目模板(多种模板可以选择)
simple版本项目
vue init simple vue-simple-demo
执行上面的命令之后生成了vue-simple-demo，并且里面只有一个index.html文件。
webpack版本项目
vue init webpack vue-webpack-demo
执行上述命令之后，会生成vue-webpack-demo文件夹，包含项目基本结构。
webpack-simple版本项目
vue init webpack-simple vue-webpack-simple-demo
执行上述命令之后，将会生成vue-webpack-simple-demo项目文件夹，包含项目基本结构。
我这里以创建webpack版本项目为例
终端键入vue init webpack vue-webpack-demo后，会询问一些基本信息



一路回车即可
完成后显示：



项目结构：

2. 安装依赖包

生成项目模板（安装完成基本结构）之后，若要运行项目，需要先安装依赖包

在项目目录下终端键入
npm install
项目依赖包会被放在node_modules文件夹中

3. 运行程序
npm run dev
显示：



浏览器输入http://localhost:8080
显示：



则项目已搭建成功