Vue - 工程化开发

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 并安装

配置插件，实现按需导入，从而减少打包后项目的体积

posted @ 2020-04-10 00:11 royal6 阅读(471) 评论(0) 收藏举报

刷新页面返回顶部

加载中...

royal6