前端系列课程之Vue单页面应用（一）_单页面文件

Vue单页面应用

目标：

1. 掌握单页面文件组建的语法
2. 掌握单页面应用的开发

单文件组件

• 概述：

1. 单文件组件是指将组件用独立文件的方式进行创建，文件扩展名是.vue
2. 单文件组件的构成
   （1）.Template模板
   （2）.实例对象
   （3）.CSS样式

单页面应用

• 创建vue单页面应用：

1. Vue-cli是一个Vue脚手架，可以快速构造项目结构
2. vue-cli2.0包含了多个项目模板
3. Vue-cli3简化了webpack配置
4. 最新版本Vue-cli4，目录结构有调整，整体与上一版本差别不大

• 创建vue单页面应用流程：

1. 全局安装vue-cli模块
   npm install @vue/cli -g

2. 创建项目
   vue create 项目名(项目名必须为小写)
   
   
   
   
   

3. 运行项目
   npm run serve

4. 发布项目
   npm run build

• Vue单页面应用项目结构

1. 首页：index.html
2. 主模块：main.js
3. 根组件：App.vue
4. 路由：index.js
5. 子组件：components/views
6. 配置文件：package.json
7. 资源文件夹：public/assets

关于（上图中render：h => h(App)）==>将根组件渲染到#app中：

Vue单页面应用项目注意事项

1. 组件内部三个组成部分根据业务需求确定内容

2. 组件的样式可以通过作用域属性（scoped）设置

    在一个.Vue文件设置样式，可能影响多个.Vue文件 ，所以需要添加scoped属性。
   1

3. assets文件夹中的图片动态加载时， 需要采用require方式

4. public文件夹中的图片动态加载时， 需要使用绝对路径

UI框架（具体操作请前往官网…）

1. Element是基于Vue2.0 的桌面端组件库
2. 官网地址 :https://element.eleme.cn/

安装：

• npm 安装

  *推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

  npm i element-ui -S

导入：

CDN

*目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel=“stylesheet” href=“https://unpkg.com/element-ui/lib/theme-chalk/index.css”>
<!-- 引入组件库 -->
<script src=“https://unpkg.com/element-ui/lib/index.js”></script>

Element UI框架的常用组件：

1. 布局
2. lcon图标组件
3. 表单元素组件
4. 数据组件
5. 导航组件
6. 其他组件