Vue开发
一、搭建Vue项目
1、安装基础组件
vue cli是Vue.js开发的标准工具。
#安装Vue-cli npm i -g @vue/cli #查看vue版本 vue --version #安装快速原型开发工具 可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发 npm i -g @vue/cli-service-global
2、创建项目
#进入空目录 vue create vue-begin #通过界面开发 vue ui
3、运行项目
npm run serve 或 yarn serve
二、Vue目录结构
1、vue项目目录结构
1)build文件夹,用来存放项目构建脚本 2)config中存放基本配置信息,最常用的就是端口转发 3)node_modules存放的是项目的所有依赖,即npm install命令下载的文件 4)src存放项目的源码 5)static用来存放静态资源 6)index.html首页,人口页,也是整个项目唯一的html页面 7)package.json中定义了项目的所有依赖,包括开发时依赖和发布时依赖 8)disk目录是npm run build编译打包后用于发布部署的文件目录
2、src目录结构
1)assets存放资产文件 2)components存放组件 3)router存放路由js文件,用于页面的跳转 4)App.vue是一个Vue组件,也是项目的第一个Vue组件 5)main.js相当于java中的main方法,是整个项目的入口js
3、vue inspect
解析出来的 webpack 配置、包括链式访问规则和插件的提示
参考:
webpack 相关
三、Vue项目两种调试方法
1、VsCode调试方法
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
2、Chrome插件vue-devtools
vue-devtools github源码下载安装
四、渲染
五、路由、状态管理
学习技术不是用来写HelloWorld和Demo的,而是要用来解决线上系统的真实问题的.