windows安装Vue脚手架
- 下载、安装node
下载地址:https://nodejs.org/en/download/
一路next,就完事 - 查询版本CMD命令框
node -v
npm -v - 安装vue-cli(脚手架)
npm install --global vue-cli
- 查询vue版本
vue --version
创建vue项目
- vue init webpack vue_deomo
vue脚手架模版
1. webpack
2. webpack-simple
3. browserify
4. browserify-simple
5. pwa
6. simple
下载时会问几个问题:自己按照要求选择(路由,单元测试,下载方式等)
如果下载方式选择手动下载,则需要进入项目名称(如下步骤)
其余两种方式(直接默认等待安装即可) - cd vue_demo
- npm install
- npm run dev
- 访问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–>
什么是组件
当一个地方有很多重复使用的功能,那么我们可以把这个东西提取出来,而提取出来的这个东西就叫组件
页面三要素
- html
- css
- 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编码规范检查
组件化编码基本流程
- 拆分组件
- 实现静态组件
- 实现动态组件
初始化显示,动态交互
组件间通讯
标签传递(同名)
(参数)(方法)