使用vue脚手架搭建工程

1.安装nodejs

官网直接下载:https://nodejs.org/en/

在安装目录下新建2个文件夹node_cache和node_global,然后在cmd窗口执行
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置淘宝镜像:
npm config set registry http://registry.npm.taobao.org/

配置环境变量，将node_cache和node_modules路径配置到环境变量中

2.全局安装webpack

注：执行命令前先把cmd窗口的快捷编辑模式去勾选

npm install webpack -g

3.全局安装vue脚手架

npm install -g @vue/cli

4.初始化vue项目

vue脚手架使用webpack模板初始化一个appname项目
npm i -g @vue/cli-init
vue init webpack appname

如下图所示：创建一个vue-demo项目
1.项目名称不变直接回车即可

2.项目描述

3.项目作者填自己即可
4.项目构建信息选择如下图所示：

5.安装vue-router

6.是否使用Eslint检查代码，安装单元测试的都可以不选，包管理工具选择npm

7.项目初始化成功

5.离线方式（webpack）创建vue项目

下载github仓库中的vue-templates/webpack，然后解压到本地。
下载地址为：https://github.com/vuejs-templates/webpack，下载之后，
解压到本地用户目录下的.vue-templates目录下,加压后的文件名称需要改为webpack。

创建点开头的文件夹命令:md .vue-templates
初始化vue项目的时候命令要加--offline:
vue init webpack vue-demo --offline

6.在进行 vue 项目开发的时候，如果安装 node-sass 出错了，可执行下面的命令

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

7.安装element-ui

npm i element-ui

在主程序中增加这3行代码，如下图所示

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

8.创建vue的代码全局模板（文件-首选项-用户代码片段）

{
	"生成的vue模板": {
		"prefix": "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>",
			"$4",
			"</style>"
		],
		"description": "生成vue模板"
	},
	"http-get请求": {
		"prefix": "httpget",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'get',",
			"params: this.\\$http.adornParams({})",
			"}).then(({ data }) => {",
			"})"
		],
		"description": "httpGet请求"
	},
	"http-post请求": {
		"prefix": "httppost",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'post',",
			"data: this.\\$http.adornData(data,false)",
			"}).then(({ data }) => {",
			"})"
		],
		"description": "httpPost请求"
	}
}