(有元老看见请补足呵呵)
甚么是vue?
vue是两个渐进的javascripe架构
甚么是渐进?
渐进是按需,渐渐软件系统机能
归纳:Vue是渐进架构, 有他们的准则, 他们要读懂句法, 特征和促进作用, 反反复复磨练采用, 多归纳.
钢架如是说
标识符充分体现:两套一般来说国际标准配置文档+文档+webpack实用性标识符
益处:照相狸尾豆,零实用性。能加速合作开发销售业务
照相狸尾豆0实用性webpackbabel全力支持css, less全力支持合作开发伺服器全力支持钢架预备
关键步骤:(在终端产品加装的)
1.自上而下加装@vue/cli组件包
yarn global add @vue/cli
npm install –g @vue/cli
2.查阅Vue指示版
vue -V
用Vue指示, 创建两个钢架项目, 并启动webpack合作开发伺服器
vue create vuecli-demo//(# vue和create是指示, vuecli-demo是他们的配置文档名)
钢架-目录分析
vuecil-demo # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文档目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文档(网页浏览的是它)
├── src # 销售业务配置文档
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue标识符文档
├── App.vue # 整个应用的根组件
└── main.js # 入口js文档
├── .gitignore # git提交忽略实用性
├── babel.config.js # babel实用性
├── package.json # 依赖包列表
├── README.md # 项目说明
└── yarn.lock # 项目包版锁定和缓存地址
钢架-自定义实用性
src并列处, 新建vue.config.js
钢架-eslint介绍
eslint是标识符检查工具,违反规定就报错
如何eslint暂时关闭?
在vue.config.js中设置lintOnSave为false重启伺服器即可
钢架-单vue文档
template里只能有两个根标签vue文档-独立组件-促进作用域互不影响style配合scoped属性, 保证样式只针对当前template内标签生效vue文档配合webpack, 把他们打包起来插入到index.html