Vue 模块化开发（构建项目&常用工具）

针对刚接触 JavaScript 模块开发系统的用户

        vue官方建议我们参考 Vue CLI 3。只要遵循指示，就能很快地能运行一个带有 .vue 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目！

通过Vue CLI 快速创建一个基础的vue项目，官方介绍就有3种，这里以第3种为例(新手可以使用第2种，图形化界面，傻瓜式点点点)

一、模块化开发——构建项目

1、全局安装 webpack

(cmd窗口输入如下命令,后面不再说明)

npm install webpack -g

2、全局安装 Vue 脚手架

npm install -g @vue/cli-init

3、初始化 Vue 项目

在项目文件夹下，输入如下命令，并按照提示完成操作，可以默认全部回车。

//vue 脚手架使用 webpack 模板初始化一个名为 appname 的项目
vue init webpack appname

4、启动 vue 项目 

项目的 package.json 中 有scripts,代表我们能运行的命令。

项目路径下输入命令，启动项目： 

npm run dev 

---

二、模块化开发——说明

1、项目结构

目录结构

├── README.md            项目介绍

├── index.html           入口页面

├── build              构建脚本配置文件目录

│  ├── build.js            生产环境构建脚本

│  ├── utils.js            构建相关工具方法

│  ├── webpack.base.conf.js      wabpack基础配置

│  ├── webpack.dev.conf.js       wabpack开发环境配置

│  └── webpack.prod.conf.js      wabpack生产环境配置

├── config             项目配置文件目录

│  ├── dev.env.js           开发环境变量

│  ├── index.js               项目配置文件

│  ├── prod.env.js           生产环境变量

├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

├── src               源码目录 

│  ├── main.js             主入口 js文件

│  ├── App.vue            根组件

│  ├── components      公共组件目录

│  ├── assets                资源目录(这里的资源会被wabpack构建)

│  │    └── logo.png     Vue 的logo图片

│  ├── routes             前端路由目录

│  │  └── index.js

├── static             纯静态资源（不会被wabpack构建）

---

2、Vue 单文件组件

格式为："xxx.vue"的文件, 三段式<template>，<script>，<style>

详情点击 Vue 单文件组件官网说明

---

三、模块化开发——常用工具

1、VScode 添加代码片段（快速生成 Vue模板）

由于，经常需要编写"xxx.vue"单文件组件，代码格式是一样的，为减少重复劳动，可以使用VsCode用户片段功能快速生成Vue模板。步骤如下：

文件 ——> 首选项 ——> 用户片段 ——> 新建全局代码片段文件

复制粘贴代码片段：

{
	"生成Vue模板": {
		"prefix": "vue", //任意目录输入快捷键"vue"回车即可获取此模板
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"",
			"return {};",
			"},",
			"//计算属性 类似于data概念",
			"computed: {},",
			"//监控data中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {},",
			"//生命周期 - 创建完成（可以访问当前this实例）",
			"created() {},",
			"//生命周期 - 挂载完成（可以访问DOM元素）",
			"mounted() {},",
			"//生命周期 - 创建之前",
			"beforeCreate() {}, ",
			"//生命周期 - 挂载之前",
			"beforeMount() {}, ",
			" //生命周期 - 更新之前",
			"beforeUpdate() {},",
			"//生命周期 - 更新之后",
			"updated() {}, ",
			"//生命周期 - 销毁之前",
			"beforeDestroy() {}, ",
			"//生命周期 - 销毁完成",
			"destroyed() {}, ",
			"//如果页面有keep-alive缓存功能，这个函数会触发",
			"activated() {} ",
			"};",
			"</script>",
			"",
			"<style scoped>",
			"</style>"
		],
		"description": "生成Vue模板"
	},
	"http-get请求": {
		"prefix": "httpget",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl('/填写请求路径'),",
			"method: 'get',",
			"params: this.\\$http.adornParms({})",
			"}).then(({data}) => {",
			"});"
		],
		"description": "http的GET请求代码片段"
	},
	"http-post请求": {
		"prefix": "httppost",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl('/填写请求路径'),",
			"method: 'post',",
			"data: this.\\$http.adornData(ids, false)",
			"}).then(({data}) => {});"
		],
		"description": "http的POST请求代码片段"
	}
}

输入快捷键“vue”,回车即可快速生成代码片段。

2、导入 Element-UI 快速开发

官方原话：“Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库”

//npm 安装(i是install缩写)
npm i element-ui -S

详情使用说明点击Elememt-UI 官方文档