Vue-cli脚手架工具
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
- 在命令行中进行如下操作：
cd 自己的项目根目录
npm install bootstrap --save --save-exact
//--save:把bootstrap作为依赖库存到package.json文件
//--save-exact 安装精确版本
- 在项目的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) //对引入的两个库进行注册