Vue太难啦！从入门到放弃day08——Vue前端工程化之Vue脚手架

一、Vue 单文件组件

1.1 传统组件的问题和解决方案

传统组件的缺陷：
    全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)
    没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案：使用Vue单文件组件，每个单文件组件的后缀名都是.vue

1.2 Vue单文件组件的基本用法

每一个Vue单文件组件都由三部分组成
    template组件组成的模板区域
    script组成的业务逻辑区域
    style样式区域


<template>
	<!-- 这里用于定义Vue组件的模板内容 -->
</template>

<script>
// 这里用于定义Vue组件的业务逻辑
export default {
	data: () { return {} }, // 私有数据
	methods: {} // 处理函数
	// ... 其它业务逻辑
}
</script>

<style scoped>
	/* 这里用于定义组件的样式 */
</style>

1.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() // 请确保引入这个插件！
	]
}

1.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)
})

<!-- 5.将来要被 vue 控制的区域 -->
<div id="app"></div>

1.5 webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令：
// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
	// 用于打包的命令
	"build": "webpack -p",
},
注意：在项目打包之前，可以将dist目录删除，生成全新的dist目录

二、Vue脚手架

2.1 Vue 脚手架的基本用法

    Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/

2.2 Vue脚手架的使用步骤

2.2.1 安装 3.x 版本的 Vue 脚手架

        npm install -g @vue/cli        

2.2.2 基于3.x版本的脚手架创建vue项目

// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目 
vue create my-project 

选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由：n
ESLint选择：ESLint + Standard config
何时进行ESLint语法校验：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm

// 2. 基于 图形化界面 的方式，创建 新版 vue 项目 
vue ui 
在自动打开的创建项目网页中配置项目信息。

// 3. 基于 2.x 的旧模板，创建 旧版 vue 项目 
npm install -g @vue/cli-init 
vue init webpack my-project

2.3 Vue 脚手架生成的项目结构分析

node_modules：依赖包目录
public：静态资源目录
src：源码目录
src/assets：资源目录
src/components：组件目录
src/views：视图组件目录
src/App.vue：根组件
src/main.js：入口js
src/router.js：路由js
babel.config.js：babel配置文件

2.4 Vue 脚手架的自定义配置

2.4.1 通过 package.json 配置项目

// 必须是符合规范的json语法
"vue": { 
    "devServer": { 
            "port": "8888", 
            "open" : true 
    } 
},
注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；
为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

2.4.2 通过单独的配置文件配置项目

① 在项目的根目录创建文件 vue.config.js 
② 在该文件中进行相关配置，从而覆盖默认配置
 module.exports = { 
    devServer: { 
        port: 8888 
    } 
 }

三、Element-UI 的基本使用

3.1 概念

    Element-UI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 

3.2 Element-UI安装

3.2.1 基于命令行方式手动安装

① 安装依赖包 npm i element-ui –S 
② 导入 Element-UI 相关资源，在src-main.js中添加如下代码：
// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);

3.2.2 基于图形化界面自动安装

总结

至此，我们终于学完了vue框架的基础知识，下一步就是将这些知识运用到实际项目中去。