npm

安装

安装 node.js
安装 git

git

安装淘宝NPM镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli

安装

安装vue-clivue init webpack vuecli

webpack是vue-cli的webpack模板
vuecli是项目名称
然后配置信息
- 基本信息直接回车确认
- 选择配置项根据需求选择 y/n
进入目录cd vuecli 执行cnpm isntall安装依赖
npm run dev运行项目

vuex

功能

实现各组件的数据交互

安装

进入目录cd vuecli
安装vuex cnpm install vuex --save

使用

main.js 增加以下内容

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'//增加(引入vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//增加 （调用vuex）键值对的 键 是 固定的 不能修改
  template: '',
  components: { App }
})

在 src 目录新建文件夹 vuex
在 vuex 目录新建文件 index.js ( 下面是该文件的模板 )

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    
}
const actions = {
    
}
const mutations = {
    
}
const getters = {

}

export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})

vue-resource

功能

实现 ajax

安装

进入目录cd vuecli
安装cnpm install vue-resource --save

使用

main.js 增加以下内容

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'
import Resource from 'vue-resource'//增加 (引入)
Vue.use(Resource)//增加（使用vue-resourece）
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '',
  components: { App }
})

然后就可以在项目中通过this.$http来调用对应的方法（比如调用get和post请求）

created:function (){
  this.$http.post("getList",{user:'tangcaiye'})
    .then(function (data){
    console.log(data)
  })
}

其他的方法: api文档

json-server

功能

搭建API数据接口

安装

进入目录cd vuecli
安装：cnpm intall json-server --save-dev

使用

首先创建一个db.json，放在根目录（vuecli）下就可以了，它用于存放接口调用时的数据.比如：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

posts,comments,profile是我的接口的router.

然后在dev-server.js中添加代码(将这块代码放在var server = app.listen(port)之前就行)：

const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use(apiRouter)
apiServer.listen(port+1, () => {
  console.log('JSON Server is running')
})

现在在浏览器中访问http://localhost:8081应该就能进到jsonserver页面中

但因为jsonserver服务器的端口号跟我们的服务器端口不一样，也就是跨域了，所以可以在vue-cli中设置代理:

设置代理

在config/index.js中的设置proxyTable的值为：

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8081/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }

其中 '/api' 为匹配项，target 为被请求的地址

因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的

所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'

如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉

访问数据的demo

created:function (){
  this.$http.get("http://127.0.0.1:8081/posts"})
    .then(function (data){
    console.log(data)//[{ "id": 1, "title": "json-server", "author": "typicode" }]
  })
}

less-loader

功能

愉快的敲css代码

安装

安装 less 和 less-loader

进入目录cd vuecli

cnpm install less-loader less --save-dev

使用

在 ***.vue 的文件内的 style 标签内加上 lang='less'
demo

vue-awesome-swiper

功能

轮播图等

安装

进入目录cd vuecli

cnpm install vue-awesome-swiper --save

使用

全局配置 swiper 打开 main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在需要使用 swiper 的 ***.vue 上使用 swipe模板

附录1： NPM常用指令

npm -v: 查看npm安装的版本
npm init: 引导你创建一个package.json文件，包括名称、版本、作者这些信息等
npm install : 安装模块
npm install -g: 安装全局模块
npm install @1.0.0: 安装指定版本的模块
npm install -save: 安装模块并添加到package.json依赖中
npm uninstall : 卸载模块
npm cache clean: 清除缓存
npm help: 查看帮助命令
npm ls: 查看当前目录安装的依赖
npm ls -g: 查看全局目录安装的依赖
npm view : 查看包的package.json
npm view dependencies: 查看包的依赖关系
npm view repository.url: 查看包的源文件地址
npm update : 更新模块
npm remove : 移除模块

附录2： ***.vue 模板

附录3： vue生命周期




    
    




     {{ message }}

vue项目搭建命令合集

npm

安装