Vue-cli脚手架工具

一. 在命令行安装脚手架

Vue-cli是官方提供的脚手架工具，里面默认继承了express以及webpack打包工具。

1. 1 安装Vue-cli

npm install -g Vue-cli                  //全局安装脚手架,注意： -g是全局安装，不加-g表示本项目安装

1. 2 初始化Vue项目

Vue init webpack project-name           //初始化Vue项目,这里会出现vue的配置选项，可根据自己的条件进行选择

1. 3 开始操作

cd project-name
npm install   //进入项目根目录，安装内部所用的依赖
npm run dev  //这句话配置了开发环境，可以在浏览器通过：localhost：//8080访问
npm run build  //在项目做好的时候进行编译压缩

二. 脚手架项目构成分析

2.1 项目目录

image.png

配置文件	作用
build	webpack的一些配置文件以及服务启动文件
config	多为build中所依赖的文件
src	页面以及逻辑文件夹
static	字体以及公共样式文件夹
.babelrc	es6编译文件配置，将es6编译为es5
.editorconfig	编写风格配置文件，比如缩进文件格式，等等
.eslintignore	忽略检测一些文件格式，比如我们默认忽略检测build以及config中的js
.eslintrc.js	代码规范化配置文件
.gitignore	忽略上传一些文件或配置
.postcsssrc.js	用js来处理css
index.html	主文件入口
package.json	npm依赖以及开发生产环境所依赖的模块包
README.md	解释说明一下本项目是做什么的

三. Vue.js中引入bootstrap

1. 在命令行中进行如下操作：

cd 自己的项目根目录
npm install bootstrap --save --save-exact     
//--save:把bootstrap作为依赖库存到package.json文件
//--save-exact 安装精确版本

2. 在项目的main.js文件引入这句话

import 'bootstrap/dist/css/bootstrap.min.css'

然后就可以在App.vue中写带有bootstrap的类

四. Vue.js中使用axios

1. 知识点
（1）为网页增加远程数据存取能力
（2）不仅支持浏览器，也支持Node.js

2. 官网
https://github.com/axios/axios

3. 安装
3.1在命令行进行下面操作

cd 自己的项目根目录
npm install --save --save-exact axios vue-axios
//vue-axios推荐安装，对axios进行封装的vue组件，安装后可以非常简单的使用axios库

3.2 在项目的main.js文件注册

import axios from 'axios'     //在main.js中引入axios库
import VueAxios from 'vue-axios'  //在main.js中引入vue-axios库
Vue.use(VueAxios,axios)   //对引入的两个库进行注册