1、安装脚手架
Vue CLI官方文档
1.1、下载node.js
下载地址
1.2、安装node.js
方式一 ：安装包 ==> 指定路径下一步即可
方式二 ：压缩包 ==> 但是需要手动配置node.js环境变量
1.3、安装完成之后检查下版本信息
1.4、配置淘宝 NPM 镜像
方式一：安装 cnpm
阿里云 npm 镜像站
方式二：手动配置镜像地址
npm config set registry https://registry.npm.taobao.org 1.5、设置 npm 的默认安装路径 npm config set cache "D:noderepsnpm-cache"npm config set prefix "D:noderepsnpm-global" 1.6、配置环境变量
1.7、查看node.js环境配置 npm config ls# C:Usersfan 目录下有个".npmrc"文件，可查看手动配置的信息
2、卸载脚手架 npm uninstall -g vue-cli# 卸载(1.x 或 2.x)版本脚手架npm uninstall -g @vue/cli 3、安装相应版本的依赖包 npm install -g vue-cli# 安装2.x版本脚手架npm install -g @vue/cli 4、查看 vue 版本 vue --version 5、创建 vue 脚手架项目 5.1、方式一：命令行 vue init webpack 项目名
5.2、方式二：可视化管理工具 vue ui #cli3.0 新增功能
6、运行前端系统
方式一：命令行（推荐）
# 进入项目目录中运行cd 项目目录npm run dev #OR npm run serve
方式二：WebStorm中手动配置
7、访问测试初始界面
8、项目结构总览 ├── build 项目打包webpack的配置内容；构建脚本目录│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新│ ├── dev-server.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 生产环境配置信息│ └── test.env.js 测试环境配置信息==================================================├── node_modules 项目依赖第三方node包（不用管）=========================src目录为开发核心=========================├── src 项目源码目录│ ├── assets 资源目录（图片...），这里的资源会被wabpack构建│ │ └── images│ │ └── logo.png│ ├── components 公共组件目录│ │ └── title.vue│ ├── routes 前端路由│ │ └── index.js│ ├── store 应用级数据（state）状态管理│ │ └── index.js│ └── views 页面目录│ ├── hello.vue│ └── notfound.vue│ ├── App.vue 最原始的根组件│ ├── main.js 主入口js文件=========================src目录为开发核心=========================├── static 纯静态资源，不会被wabpack构建。│ └── mock mock数据目录│ │ └── hello.js└── test 测试文件目录（unit&e2e） └── unit 单元测试 ├── index.js 入口脚本 ├── karma.conf.js karma配置文件 └── specs 单测case目录 └── Hello.spec.js├── .babelrc babel配置。"balel可以将vue的单文件组件的写法转换成浏览器能够编译执行的代码"├── .editorconfig 编辑器语法配置文件├── .gitignore git忽略文件├── .postcssrc.js 对postcssrc的配置项├── index.html 默认首页模板文件，入口页面├── LICENSE 开源协议说明├── package-lock.jsonnpm包锁文件，确定依赖包的版本├── package.jsonnpm包配置文件，里面定义了项目的npm脚本，依赖包等信息├── README.md项目介绍 8.1 详细介绍
将vue初始化自带的无用文件删除后的src目录结构（pages目录及其以下文件是自己所创建的）
main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router' //自动引入router文件夹下的index.js文件Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', // router: router, //ES6 语法，键值相同，可以省略 router, //路由就是根据网址不同，返回不同的内容给用户 // components: { App: App }, //ES6 语法，键值相同，可以省略 components: { App }, template: '<App/>'})
App.vue
<template> <div id="app"> <!-- router-view 显示当前路由地址所对应的内容 --> <router-view/> </div></template><script>export default { name: 'App'}</script><style></style>
router/index.js
import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'import List from '@/pages/list/List'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/list', name: 'List', component: List } ]}) 9、安装 axios
axios 参考地址
9.1 切换到项目根目录，npm 安装axios npm install axios --save 9.2 打开项目src目录下的main.js，全局引入axios import axios from 'axios'Vue.prototype.$axios = axios
组件中，我们就可以通过 this.$axios.get() 来发起我们的请求了
10、安装 element-ui
Element 官网
10.1 切换到项目根目录，npm 安装 element-ui npm i element-ui -S 10.2 打开项目src目录下的main.js，引入element-ui依赖 import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI); 11、打包与部署 11.1 打包 #在根目录下（包含package.json的文件夹）打包npm run build
打包后的文件结构
11.2 部署
11.3 根据配置文件设置路径