VUE-2.X学习笔记day6(含vue脚手架安装)

windows安装Vue脚手架

1. 下载、安装node
   下载地址：https://nodejs.org/en/download/
   一路next,就完事
2. 查询版本CMD命令框
   node -v
   npm -v
3. 安装vue-cli(脚手架)
   npm install --global vue-cli
   
4. 查询vue版本
   vue --version

创建vue项目

1. vue init webpack vue_deomo
   vue脚手架模版
   1. webpack
   2. webpack-simple
   3. browserify
   4. browserify-simple
   5. pwa
   6. simple
   下载时会问几个问题:自己按照要求选择(路由,单元测试,下载方式等)
   如果下载方式选择手动下载,则需要进入项目名称(如下步骤)
   其余两种方式(直接默认等待安装即可)
2. cd vue_demo
3. npm install
4. npm run dev
5. 访问http://localhost:8080

项目结构

build–>项目打包是用到的东西
config–>项目的设置
node_modules->项目用到的组建
src–>源码的目录
static–>静态资源文件夹
.babelrc–>es6转es5语法(rc:runtime controll)
.editorconfig–>
.eslintignore–>忽略eslint的检查(设置文件夹)
.eslintrc.js–>eslint的配置
.gitlgnore–>git的忽略
.postcssrc.js–>
index.html–>单页应用 主页
package.json–>当前应用的描述文件
package-lock.json–>
README.md–>

什么是组件

当一个地方有很多重复使用的功能,那么我们可以把这个东西提取出来,而提取出来的这个东西就叫组件

页面三要素

1. html
2. css
3. js

打包发布项目

1. 打包

npm run bulid

2.发布

静态服务器工具包

npm install -g serer
serer dist
访问 http://localhost:5000

动态web服务器(tomcat)

修改配置:webpack.prod.conf.js
	output{
	publicPath:'/xxx/'  //打包文件夾名稱(新增这一行)
}

重新打包
npm run build
修改dist文件夹项目为xxx
将xxx拷贝运行到tomcat 的webapps目录下
访问:http://localhost:8080/xxx

eslint编码规范检查

组件化编码基本流程

1. 拆分组件
2. 实现静态组件
3. 实现动态组件
   初始化显示,动态交互

组件间通讯

标签传递(同名)

(参数)(方法)