关于Vue
- 美籍华人尤雨溪团队开发的前端视图层（View）框架；
- 声明式渲染/数据驱动视图：程序员不需要做DOM操作，只要维护好数据，视图即可自动响应和更新；
- 组件化开发：页面中的独立可复用单元（轮播图、导航条、数据表格、侧边栏、登录注册表单...）可封装为组件（内置模板+样式+数据+交互逻辑），即实现一次封装，多次复用；
- 生态丰富：其生态包括工程脚手架(打包配置)、前端路由、状态管理、组件库、以及衍生而来的多端开发框架等等；
- 详实的 中文文档 和活跃的开发者社区；
- 好上手！上限高！市场占有率高（特别是在华人圈）！企业需求多！
- 综上：Vue是一个非常值得学习和推荐的前端开发框架！
安装脚手架
# 首先傻瓜式安装NodeJS最新的LTS版本
# 略
# 全局安装NPM的源设置工具
npm i -g nrm
# win+x打开管理员终端，执行以下命令
Set-ExecutionPolicy RemoteSigned
# 可用源测速+切换淘宝源
nrm test
nrm use taobao
# 全局安装脚手架
npm install -g @vue/cli
创建工程
- 创建过程中选择
手动选择特性``Manually Select xxx - 本例选择 Vue2 + Bable + SCSS + Router
vue create hello-world
# 运行起来
cd hello-world
npm run serve
ESM模块化语法
导出与导入零件
export const count = 10
export function addCount(n){
count += 10
}
export class Counter {...}
import { count,addCount,Counter } from "目标模块的路径"
导出与导入整体
export default {...}
import whatever from "目标模块的路径"
工程结构简介
node_modules 第三方依赖
public 静态资源目录(通过网络URL访问)
|- index.html 单文件应用(SPA)入口页面
src
|- assets 静态资源目录(会和代码一起打包)
|- components 可复用组件目录
|- router
|- index.js 全局路由表
|- views 页面级组件目录
|- App.vue 根组件
|- main.js 主逻辑入口
.browserslistrc 浏览器兼容配置(通常无需改动)
.gitignore 版本忽略配置
babel.config.js ES语法兼容配置(通常无需改动)
jsconfig.jsson ES语法兼容配置(通常无需改动)
package.json NPM包配置
README.md 版本说明
vue.config.js 脚手架打包配置
