2018-12-17

Vue脚手架安装及项目搭建（mac版）

前提：电脑上已经安装好了npm

vue脚手架全局安装终端命令

$ sudo npm install -g vue-cli

安装完成之后检测

$ vue -V

如果终端输出vue的版本号，那么脚手架就安装成功了，

项目搭建

1. 在项目的父级目录下进入终端，此目录任意 cd /usr/

2. 安装项目（在当前的目录下）

终端命令

$ vue init webpack vueproject

这里的vueproject是vue的项目名称，该名称不限制，可以任意。至于vue项目的其他依赖模块，我们根据项目需求单独安装

项目设置01

项目设置02

项目设置03

如果终端显示如下，则vue项目搭建成功

搭建成功

打开项目的父级目录，就可以看到当前vue项目的根目录，这里示例是vueproject，vueproject文件夹及其所有的子文件夹都是通过终端命令操作安装的。

vue项目目录（自动生成）

3. 运行vue项目

终端命令（在当前的vue项目目录下的终端，在次示例中为vueproject）

$ npm run dev

运行vue项目

如果项目运行成功，会在终端显示项目的路径，如下图，路径为

http://localhost:8081，在浏览器中输入此路径，就是vue项目的运行页面

运行成功

为了方便我们开发，还要安装一些其他的依赖模块，所以还要安装一次。

终端命令（当前的vue项目目录下）

$ npm install

安装模块

到现在位置，一个基于vue的系统项目就搭建成功了。这只是搭建，如果想要开发的话，还需要系统的学习。