Vue 构建单页应用 1

简介和对比

• Vue Angular React 都是基于 “单页面组件化” 思想的前端框架。

安装脚手架

• 必须安装nodeJS（其中自带npm）
• 安装cnpm以提升npm下载速度 => node包中国淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
• 使用cnpm安装cli脚手架工具(命令行工具) cnpm install -g @vue/cli

创建和启动项目

• 创建项目 vue create prjectName
• 进入创建的项目目录，执行命令启动项目 npm run serve 访问 localhost:8080(默认) 即可看到构建好的项目
• 打包构建项目 npm run bulid 。

命令都是是从 ./package.json 文件中的 "scripts" 属性中找到的。

基本目录结构

• node_modules/ => node包目录
• public/ => 公开目录，里面有入口文件index.html
• src/ => 源代码目录（我们主要编写的文件）
  • assets/ => 静态资源存放目录
  • components/ => 组件目录
  • App.vue => 根组件
  • main.js => 实例化 Vue 挂载组件。
• package.json => 项目管理文件（依赖声明、脚本声明等等...）
• ...

只列出了重点

了解第一个组件

• App.vue

• 可以看到，官方提供的组件是3个部分组成：