模块化相关规范

目录

• 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 并安装
⑤
配置插件，实现按需导入，从而减少打包后项目的体积