一 . 前期准备工作,安装必要的软件

• Homebrew: Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件
• Node.js: JavaScript运行环境(runtime)
• npm: node.js下的包管理器，NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用

1.1 安装 Homebrew

新的 Mac 电脑不自带 Homebrew，需要先安装 Homebrew。在终端执行以下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 安装完成后就可以在命令行状态中使用brew命令了，可以用brew help命令查看帮助，一些常见命令：

brew -v               // 查看版本
brew install 软件名    // 安装软件
brew search 软件名     // 搜索软件
brew uninstall 软件名  // 卸载软件
brew upgrade 软件名    // 更新具体软件
brew list             // 显示已安装软件
brew info 软件名       // 查看软件信息
brew home 软件名       // 用浏览器打开官网网页查看软件信息
brew outdated         // 查看哪些已经安装的软件需要更新
brew update           // 更新所有软件，需要先安装git

1.2 安装 Node.js

安装好 Homebrew 后，再来安装 Node 就很方便了。终端执行以下命令：

sudo brew install node

测试node是否安装成功, 查看node版本node -v

MacBook-Pro% node -v
v10.16.3

---

二 . 之后安装步骤分为两种方式

说明: 根据国情，很多资源在局域网里访问不了，于是淘宝提供了一个资源站，把外网的一些东西下载好放到该资源站上，这样我们就可以下载，这就是镜像。也可以不装，直接用npm，看自己情况。个人推荐方式二

方式一:

2.1 安装淘宝镜像

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2 安装vue-cli

• vue-cli是vue官方发布的项目脚手架，可以快速创建vue项目。

cnpm install vue-cli -g     // 全局安装vue-cli
vue -V            // 查看vue-cli版本号

2.3 安装vue-lic初始化插件

sudo npm install -g @vue/cli-init

2.4 开始一个项目

mkdir vue                           // 新建vue目录
cd vue                              // 进入vue目录
vue init webpack-simple vue-demo    // 根据模版创建项目
//或 vue init webpack myvue
// ...
// 设置项目名称、描述、作者
// 经过一些初始化设置后就项目就构建好了，然后根据提示进入项目并启动
// ...
cd vue-demo                         // 进入构建后的项目
npm install                         // 安装项目依赖（这一步耗时稍长）
npm run dev                         // 启动项目

方式二:

2.5 安装vue-cli

sudo npm install -g @vue/cli

• 验证是否成功(查看版本)vue -V

MacBook-Pro% vue -V
3.11.0

2.6 创建工程

2.6.1 打开工程存放的目录

cd [文件夹的绝对路径|相对路径]

2.6.2 创建工程

vue create vue-demo

2.7启动工程

2.7.1 进入工程

cd vue-demo

2.7.2 启动

npm run serve

在浏览器输入localhost:8080,出现如下页面为启动成功

三. 安装工程基础配置

3.1 安装

//安装bootstrap
npm install bootstrap@3.4.1 --save
//安装Element
npm i element-ui -S
//安装axios 
npm install axios vue-axios --save
//安装vue-cookies
npm install vue-cookies --save

3.2 main.js配置

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from "vue-axios";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'  //引入css样式
import 'bootstrap/dist/css/bootstrap.min.css'  //bootstrap样式
import VueCookies from 'vue-cookies'
/**
 * 采用use后，可以在任何组件中使用
 */
Vue.use(VueAxios, axios);
Vue.use(ElementUI)
Vue.use(VueCookies)   // 在组件中可以使用 this.$cookies
axios.defaults.baseURL = 'http://localhost:8081'//请求地址

new Vue({
  render: h => h(App),  
}).$mount("#app")

四 . 项目打包部署

4.1项目打包

• 打开工程根路径执行命令

npm run build

• 执行命令后, 工程会生成一个dist的文件夹

  
  

4.2 在tomcat上部署

• 将生成的dist目录下的文件放入到tomcat或者nginx下，启动服务器，即可访问。