针对刚接触 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() {}, //生命周期 - 销毁完成","activated() {} //如果页面有keep-alive缓存功能，这个函数会触发","};","</script>","","<style scoped>","</style>"]}
}

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

2、导入 Element-UI 快速开发

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


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

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

Vue 模块化开发（构建项目常用工具）相关推荐

java环境搭好软件无法运城_Javaweb开发环境搭建常用工具类型
随着互联网的不断发展,无论是前端开发还是后端开发都越发垂直细分化,而今天我们就通过案例分析来了解一下,Javaweb开发环境搭建常用工具类型. 一:Web相关概念 Web程序也就是一般所说的网站,由服 ...
好文分享：Javaweb开发环境搭建常用工具类型
随着互联网的不断发展,无论是前端开发还是后端开发都越发垂直细分化,而今天我们就通过案例分析来了解一下,Javaweb开发环境搭建常用工具类型. 一:Web相关概念 Web程序也就是一般所说的网站,由服 ...
Vue+ts开发h5项目时引用百度地图报BMap问题
最近在用vue+ts开发h5项目时,有一个页面用到了vue-baidu-map,运行里面的搜索功能时,控制台一直报如下错误解决方法:
SpringBoot + Vue + Electron 开发 QQ 版聊天工具
一.简介这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息 ...
Android开发几个常用工具类
本文出自[张鸿洋的博客]并做了部分修改. 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38965311 打开大家手上的项目,基 ...
转载：我如何使用 Django + Vue.js 快速构建项目
原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下引言大U的技术课堂的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...
五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
Java 项目开发及管理常用工具收集
1.反编译工具 jd-ui 2.API调试工具 Postman 3.性能测试工具 Jmeter.LoadRunner 4.数据库连接客户端 Navicat.DbVisualizer 5.Redis可视 ...
项目常用工具类整理（五）--jar包整理
2019独角兽企业重金招聘Python工程师标准>>> SSH框架: Struts1.2.9+Spring2.5+Hibernate3.2 说明:commons的几个包算是公用Jar ...

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