1、安装脚手架
1.1、下载node.js
1.2、安装node.js
方式一 ：安装包 ==> 指定路径下一步即可
方式二 ：压缩包 ==> 但是需要手动配置node.js环境变量
1.3、安装完成之后检查下版本信息
1.4、配置淘宝 NPM 镜像
方式一：安装 cnpm
方式二：手动配置镜像地址
npm config set registry https://registry.npm.taobao.org
1.5、设置 npm 的默认安装路径
npm config set cache "D:\nodereps\npm-cache"
npm config set prefix "D:\nodereps\npm-global"
1.6、配置环境变量
1.7、查看node.js环境配置
npm config ls
# C:\Users\fan 目录下有个".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.json npm包锁文件，确定依赖包的版本
├── package.json npm包配置文件，里面定义了项目的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
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
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 根据配置文件设置路径
版权声明：本文为Doub1eFAN原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。