Vue开发

基础知识:
  ES6
  Vue.js 

一、搭建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源码下载安装 

四、渲染

五、路由、状态管理


参考:
Vue官网 
Vue-cli 

posted @ 2020-11-16 09:33  cac2020  阅读(233)  评论(0编辑  收藏  举报