Vue+Bootstrap+json-server搭建vue开发环境

来源：互联网发布：linux查看压缩文件内容编辑：程序博客网时间：2024/05/22 00:51

一：安装node.js

因为npm包含的很多依赖包都是部署在国外，在国内下载会很慢，
这里使用cnpm的淘宝镜像，速度会很快，
也可以通过添加npm的参数alias 一个新命令，具体方法参考：http://npm.taobao.org

二：安装vue-cli脚手架工具

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。
该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装命令为：

cnpm install -g vue-cli

，安装完毕后，检测是否安装成功，在cmd中输入

vue -V

，若出现版本提示，则安装成功。

三：安装Git

安装git，这个主要是使用git bash工具，为了在windows环境下的命令行与Linux下的一致，方便以后发布项目。

四：初始化vue项目

在git bash中输入命令：
```
vue init webpack vue-demo
```
进行初始化项目，这里会让输入一些信息，比如项目名称、作者、项目描述等等，还有是否使用路由、测试等模块，根据自己需要选择是否安装即可。

进入vue-demo目录，输入命令：
```
cnpm install
```
，安装项目的依赖包。

输入命令：
```
cnpm run dev
```
运行项目，在浏览器打开：http://localhost:8080，如出现vue欢迎页，则项目启动成功。

五：安装vue-resource与json-server

安装vue-resource，用于与后端数据交互，简单来说就是与jQuery的ajax一样的方法，用法为：
```
this.$http.post()
```
```
this.$http.get()
```
命令为：
```
cnpm install vue-resource –save
```

安装json-server，用于伪造数据，安装命令为：
```
cnpm install json-server --save
```
然后在src统计目录下创建一个db.json的文件，里面放入需要用到的伪造数据，
```
{    "login": {        "userlogin": "001",        "userName": "张三",        "passwd": "123456"    }}
```
输入命令：
```
json-server --watch db.json
```
启动json-server服务器，在浏览器输入http://localhost:3000/login，则会返回改接口对应的数据内容。

在package.json文件的scripts中，添加数据服务与项目服务一起启动命令并指定数据服务的端口号为8081

在config目录下的index.js文件中，添加映射，把api开头的请求映射到数据服务

同时启动项目与数据服务，命令：
```
cnpm run mockdev
```
这时就可以在vue中使用json-server的数据服务啦

六：安装jQuery与bootstrap

安装jQuery，运行命令：
```
cnpm install jquery --save
```
将jQuery安装到项目中，然后修改build目录下webpack.base.conf.js文件
在里面添加
```
var webpack = required('webpack')
```

在module.exports中添加代码：

plugins: [    new webpack.optimize.CommonsChunkPlugin('common.js'),    new webpack.ProvidePlugin({      jQuery: 'jquery',      $: 'jquery'    })  ]

在main.js中引入jQuery，
```
import jQuery from 'jquery'
```

下载bootstrap，然后在assets目录下新建bootstrap目录，将css、js、fonts三个目录放到其中

修改build目录下webpack.base.conf.js文件，在里面加入’bootstrap’: resolve(‘src/assets/bootstrap’)

resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),      'bootstrap': resolve('src/assets/bootstrap')    }  },

在main.js中引入

import 'bootstrap/js/bootstrap.min.js'

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

到此，vue+bootstrap+json-server开发环境就搭建完成啦

阅读全文

1 0