Vue-cli脚手架工具

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 

klmhly 已关注

2018.05.21 17:50* 字数 198 阅读 29评论 1喜欢 0

一. 在命令行安装脚手架

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

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

三. Vue.js中引入bootstrap

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

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

  1. 在项目的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)   //对引入的两个库进行注册

以上是 Vue-cli脚手架工具 的全部内容， 来源链接： utcz.com/z/379116.html

回到顶部