模块化相关规范

目录

• Vue 单文件组件
  • 概述
  • vue 单文件组件的组成结构
  • webpack 中配置 vue 组件的加载器
  • 在 webpack 项目中使用 vue
  • webpack 打包发布
• Vue 脚手架
  • 概述
  • 安装
  • 基于3.x版本的脚手架创建vue项目
    • 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
    • 2. 基于 图形化界面 的方式，创建 新版 vue 项目：
    • 3. 基于 2.x 的旧模板，创建 旧版 vue 项目：
  • Vue 脚手架生成的项目结构分析
  • Vue 脚手架的自定义配置
    • 1. 通过 package.json 配置项目
    • 2. 通过单独的配置文件配置项目
• Element-UI 的基本使用
  • 1. 基于命令行方式手动安装
  • 2. 基于图形化界面自动安装

---

Vue 单文件组件

概述

Vue 单文件组是个模板，文件名以.vue结尾，它解决了如下的问题:

1. 全局定义的组件必须保证组件的名称不重复
2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）
   
   

vue 单文件组件的组成结构

它由如下 3 部分组成:

1. template 组件的模板区域
2. script 业务逻辑区域
3. style 样式区域

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

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

<!-- 
指定 scoped 指令, 使当前样式表只在当前 单文件组件的作用域生效, 从而不影响其他组件
-->
<style scoped>
	/* 这里用于定义组件的样式 */
</style>

webpack 中配置 vue 组件的加载器

1. 在项目根目录，运行 npm i vue-loader vue-template-compiler -D 命令
2. 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：

   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   module.exports = {
   	module: {
   		rules: [
   			// ... 其它规则
   			{ test: /\.vue$/, loader: 'vue-loader' }
   		]
   	},
   	plugins: [
   		// ... 其它插件
   		new VueLoaderPlugin() // 请确保引入这个插件！
   	]
   }
   

在 webpack 项目中使用 vue

1. 在项目更目录，运行 npm i vue –S 安装 vue
   注意，这里安装的vue并非完整版，内部缺少许多 API 的阉割版
2. 在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
3. 在入口文件中创建 vue 的实例对象，并指定要控制的 el 区域
4. 在vue实例的配置对象中，通过 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)
   })
   

   
   

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",
},

配置完成后，在项目根目录下运行 npm run build 命令即可

Vue 脚手架

概述

Vue 脚手架用于快速生成 Vue 项目基础架构，官网地址

安装

1. 安装 3.x 版本(推荐使用 2.x 或 3.x)的 Vue 脚手架：npm install -g @vue/cli
2. 通过vue -V命令来检查 vue脚手架是否安装成功以及版本号

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

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

在项目根目录下，执行vue create 自定义项目名称
进入交互是问答面板，自行选着功能







至此，选项配置完成，项目初始化中
项目初始化完毕后

webpack编译完成后...

2. 基于 图形化界面 的方式，创建 新版 vue 项目：

在根目录下执行 vue ui

命令执行后会在浏览器自动打开一个图形化界面来创建 vue 项目

选择 ‘创建’ 面板 ，可自定义创建项目的目录，点击 ‘在此创建项目’ 按钮即可创建并进入新的面板

输入项目名 -> 包管理器(默认) -> 更多选项(默认) -> Git(默认，自定义提交初始信息) -> 下一步 -> 进入玉色面板

首次创建 推荐 手动设置预设 -> 下一步 -> 进入功能面板

开启基本功能：Babel、Router、Linter / Formatter、使用配置文件 -> 下一步 -> 进入配置面板

• Use history mode for router ... ： 默认关闭 👇
• Pick a linter.. : ESlint + Standard config 👇
• Pick additional lint... : 默认开启 👇
• 创建项目 👇
• 保存预设

项目创建成功后，进入项目仪表盘

启动项目

3. 基于 2.x 的旧模板，创建 旧版 vue 项目：

在项目根目录下执行：

npm install -g @vue/cli-init
vue init webpack 自定义项目名称

配置：

启动项目：

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

基本项目结构如下:

.git

node_modules--------->依赖包目录

public---------------------->静态资源目录

src---------------------------> 组件源码目录

|---asserts------------------>资源文件夹

|---components---------->组件文件夹

|---views-------------------->视图组件文件夹

|---App.vue---------------->根组件

|---main.js----------------->打包入口文件

|---router.js---------------->路由相关配置

.browserslistrc

.editorconfig

.eslintrc.js----------------->ESlint 语法相关配置文件

.gitignore------------------>git忽略文件

babel.config.js------------>Babel配置文件

vue.config.js--------------->vue手脚架相关配置

package.json-------------->项目包管理配置文件

package-lock.json

postcss.config.js---------> postcss 配置文件

README.md

Vue 脚手架的自定义配置

1. 通过 package.json 配置项目

{
    // 必须是符合规范的json语法
	"vue": {
        "devServer": {
            "port": "8888",
            "open" : true
        }
	},
}

注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

2. 通过单独的配置文件配置项目

1. 在项目的跟目录创建文件 vue.config.js

2. 在该文件中进行相关配置，从而覆盖默认配置

   // vue.config.js
   module.exports = {
   	devServer: {
   		port: 8888, // 端口设置
           open: true  // 浏览器自动打开
   	}
   }
   

Element-UI 的基本使用

Element-UI官网

1. 基于命令行方式手动安装

1. 在项目根目录，安装依赖包 npm i element-ui –S

2. 在项目打包入口文件 导入 Element-UI 相关资源

   // 导入组件库
   import Vue from 'vue'
   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 并安装
⑤
配置插件，实现按需导入，从而减少打包后项目的体积