教程：

使用vue-cli创建项目

https://www.cnblogs.com/l-y-h/p/11241503.html

1.npm+node环境检测

【命令行查看版本号】
node -v
npm -v
【升级npm（可选操作）】npm install -g npm

【修改为淘宝镜像（可选操作）】npm config set registry "https://registry.npm.taobao.org"

2.创建项目提示

【命令行进入该目录】
cd E:\vue\vue-demo

【下载模板】
vue init webpack vue-demo

【进入交互页面，根据自己情况选择】
? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我选的NPM

3.启动项目

【命令行进入该目录】
cd E:\vue\vue-demo

【初始化项目】
 npm install
 
 【启动项目，根据package.json中的数据来启动】
 npm run serve
 
 【关闭项目】
 Ctrl + C
 
 【浏览器访问：】
http://localhost:8080/

【项目打包上线】
npm run build
将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可（比如tomcat的webapps目录下）。

4.项目打包

将接口绑定线上域名，数据库也改成线上实际真实数据库

终端运行命令 npm run build

然后将dist的文件 拷贝到服务器根目录，将域名解析过去就行，浏览器输入域名，就可以访问了

到此算是，vue开发前端页面完成了，当然我这里涉及到了后端接口和数据库的知识，也只是皮毛而已，搞好能用的那种，我觉得还是有必要了解一下的！