Vue学习入门

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