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#/

猜你喜欢