1、安装WebStorm；
2、激活WebStorm：https://blog.csdn.net/qq_40147863/article/details/81317709
3、安装全局脚手架：npm install -g vue-cli
4、初始化项目demo：
vue init webpack demo
输入完成后会跳出各种选项：
- Project name (demo) 项目名称，默认括号内名称
- Project description (A Vue.js project) 项目描述，括号内默认也可以自定义输入回车
- Author () 作者信息
- Runtime + Compiler: recommended for most users 运行加编译，默认就可以
- Install vue-router? (y/n) 是否安装vue-router,建议安装
- Use ESLint to lint your code? (y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具，是用来统一代码风格的
- Setup unit tests with Karma + Mocha? (y/n) 是否安装单元测试
- Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试
或者打开webstorm，点击New Project，然后选择新建vue.js工程，输入相关参数，点击Next，然后调整各种选项参数，或者保持默认值并一路Next.
5、启动项目：npm run start，完成后在浏览器中打开：http://localhost:8080即可查看到页面；
注：安装依赖命令：npm install
6、项目结构：
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试脚本的配置
|-- src // 源码目录
| |-- components // vue所有组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- test // 测试文件
| |-- e2e // e2e 测试
| |-- unit // 单元测试
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .eslintignore // eslint检测代码忽略的文件（夹）
|-- .eslintrc.js // 定义eslint的plugins,extends,rules
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明，markdown文档
|-- index.html // 访问的页面
|-- package.json // 项目基本信息,包依赖信息等7、学习资料：
https://cn.vuejs.org/v2/guide/instance.html
https://blog.csdn.net/xiaoyangerbani/article/details/80735310
https://note.youdao.com/share/?id=b8e1247e079b8ccd0d2644b28c00f72b&type=note#/
https://www.runoob.com/vue2/vue-start.html
https://blog.csdn.net/nsrainbow/article/details/80589476