vue项目搭建命令合集

作者: 饼饼_佳 | 来源:发表于2017-06-03 19:10 被阅读0次

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: '<App/>',
  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: '<App/>',
  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

<template>
    <div class="test">
        <div class="test-item"></div>
    </div>
</template>

<style lang='less'>
    .test {
        width: 100px;
        height: 100px;
        background: #f00;
        .test-item {
            width: 50px;
            height: 50px;
            background: #ff0;
        }
    } 
</style>

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模板

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <!-- 导航点 -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- 上一页 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <!-- 下一页 -->
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>
 
<script>
  // swiper options example:
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          // swiper configs 所有的配置同swiper官方api配置
          autoplay: 3000, //轮播时间
          pagination : '.swiper-pagination',//导航点依赖
          prevButton:'.swiper-button-prev',//上一页依赖
          nextButton:'.swiper-button-next',//下一页依赖
          scrollbar:'.swiper-scrollbar',//滚动条依赖
          mousewheelControl : true,//是否开启鼠标控制Swiper切换
          observeParents:true,//当Swiper的父元素变化时，Swiper更新。
          loop : true,//环路
          autoplayDisableOnInteraction : false,//用户操作后是否重启autoplay
        }
      }
    }
  }
</script>

附录1： NPM常用指令

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

附录2： ***.vue 模板

<template>
    <div>

    </div>
</template>
<script type="text/javascript">
export default {
    data(){
        return {

        }
    },
    created(){

    },
    methods:{

    },
    computed:{

    }
}
</script>
<style>

</style>

附录3： vue生命周期

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 实例创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 实例创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 事件挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 事件挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 数据更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 数据更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 实例销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 实例销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

vue项目搭建命令合集

npm

安装

vue-cli

安装

vuex

功能

安装

使用

vue-resource

功能

安装

使用

json-server

功能

安装

使用

less-loader

功能

安装

使用

vue-awesome-swiper

功能

安装

使用

附录1： NPM常用指令

附录2： ***.vue 模板

附录3： vue生命周期

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读