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 项目目录
配置文件 | 作用 |
---|---|
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) //对引入的两个库进行注册