3. vue 单文件组件
3.1 传统组件的问题和解决方案
1. 问题
全局定义的组件必须保证组件的名称不重复
字符串模板缺乏语法高亮, 在 html 有多行的时候, 需要用到丑陋的 \
不支持 CSS 意味着当 HTML 和 JavaScript 组件化时, CSS 明显被遗漏
没有构建步骤限制, 只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器 (如: Babel )
2. 解决方案
针对传统组件的问题, Vue 提供了一个解决方案 -- 使用 Vue 单文件组件.
3.2 Vue 单文件组件的基本用法
单文件组件的组成结构
template 组件的模板区域
script 业务逻辑区域
style 样式区域
- <template>
- <!-- 这里用于定义 Vue 组件的模板内容 -->
- </template>
- <script>
- // 这里用于定义 Vue 组件的业务逻辑
- export default {
- data: () {
- return {}
- }, // 私有数据
- methods: {} // 处理函数
- // ... 其它业务逻辑
- }
- </script>
- <style scoped>
- /* 这里用于定义组件的样式 */
- </style>
3.3 webpack 中配置 vue 组件的加载器
运行 NPM i vue-loader vue-template-compiler -D 命令
在 webpack.config.JS 配置文件中, 添加 vue-loader 的配置项如下:
- const VueLoaderPlugin = require('vue-loader/lib/plugin')
- module.exports = {
- module: {
- rules: [
- // ... 其它规则
- {test: /\.vue$/, loader: 'vue-loader'}
- ]
- },
- plugins: [
- // ... 其它插件
- new VueLoaderPlugin() // 请确保引入这个插件!
- ]
- }
3.4 在 webpack 项目中使用 vue
运行 NPM i vue -S 安装 vue
在 src -> index.JS 入口文件中, 通过 import Vue from 'vue' 来导入 vue 构造函数
创建 vue 的实例对象, 并指定要控制的 el 区域
通过 render 函数渲染 App 根组件
- // 1. 导入 Vue 构造函数
- import Vue from 'vue'
- // 2. 导入 App 根组件
- import App from './components/App.vue'
- const vm = new Vue({
- // 3. 指定 vm 实例要控制的页面区域
- el: '#app',
- // 4. 通过 render 函数, 把指定的组件渲染到 el 区域中
- render: h => h(App)
- })
3.5 webpack 打包发布
上线之前需要通过 webpack 将应用进行整体打包, 可以通过 package.JSON 文件配置打包命令:
- // 在 package.JSON 文件中配置 webpack 打包命令
- // 该命令默认加载项目根目录中的 webpack.config.JS 配置文件
- "scripts": {
- // 用于打包的命令
- "build": "webpack -p",
- // 用于开发调试的命令
- "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
- },
4. Vue 脚手架
4.1 Vue 脚手架的基本用法
Vue 脚手架用于快速生成 Vue 项目基础架构, 其官网地址为: https://cli.vuejs.org/zh/
安装 3.x 版本的 Vue 脚手架: NPM install -g @vue/cli
基于 3.x 版本的脚手架创建 vue 项目
- // 1. 基于 交互式命令行 的方式, 创建 新版 vue 项目
- vue create my-project
- // 2. 基于 图形化界面 的方式, 创建 新版 vue 项目
- vue ui
- // 3. 基于 2.x 的旧模板, 创建 旧版 vue 项目
- NPM install -g @vue/cli-init
- vue init webpack my-project
使用命令方式安装说明:
命令: vue create my-project
选择 Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选.
是否选用历史模式的路由: n
ESLint 选择: ESLint + Standard config
何时进行 ESLint 语法校验: Lint on save
babel,postcss 等配置文件如何放置: In dedicated config files(单独使用文件进行配置)
是否保存为模板: n
使用哪个工具安装包: NPM
4.2 Vue 脚手架生成的项目结构分析
目录 | 说明 |
---|---|
node_modules | 依赖包目录 |
public | 静态资源目录 |
src | 源码目录 |
src/assets | 资源目录 |
src/components | 组件目录 |
src/views | 视图组件目录 |
src/App.vue | 根组件 |
main.js | 入口 js |
src/router.js | 路由 js |
babel.config.js | babel 配置文件 |
4.3 Vue 脚手架的自定义配置
1. 通过 package.JSON 配置项目
- // 必须是符合规范的 JSON 语法
- "vue": {
- "devServer": {
- "port": "8888",
- "open": true
- }
- },
注意: 不推荐使用这种配置方式. 因为 package.JSON 主要用来管理包的配置信息; 为了方便维护, 推荐将 vue 脚 手架相关的配置, 单独定义到 vue.config.JS 配置文件中.
2. 通过单独的配置文件配置项目
在项目的跟目录创建文件 vue.config.JS
在该文件中进行相关配置, 从而覆盖默认配置
- // vue.config.JS
- module.exports = {
- devServer: {
- port: 8888
- }
- }
Element-UI 的基本使用
Element-UI: 一套为开发者, 设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.
官网地址: http://element-cn.eleme.io/#/zh-CN
1. 基于命令行方式手动安装
安装依赖包
NPM i element-ui -S
导入 Element-UI 相关资源
- // 导入组件库
- import ElementUI from 'element-ui';
- // 导入组件相关样式
- import 'element-ui/lib/theme-chalk/index.css';
- // 配置 Vue 插件
- Vue.use(ElementUI);
2. 基于图形化界面自动安装
运行 vue ui 命令, 打开图形化界面
通过 Vue 项目管理器, 进入具体的项目配置面板
点击 插件 -> 添加插件, 进 入插件查询面板
搜索 vue-cli-plugin-element 并安装
配置插件, 实现按需导入, 从而减少打包后项目的体积
来源: http://www.bubuko.com/infodetail-3500166.html