vue項(xiàng)目搭建命令合集

npm

安裝

  1. 安裝 node.js
  2. 安裝 git
  • git
  1. 安裝淘寶NPM鏡像
  • npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli

安裝

  • 安裝vue-clivue init webpack vuecli
  • webpack是vue-cli的webpack模板
  • vuecli是項(xiàng)目名稱(chēng)
  • 然后配置信息
    • 基本信息直接回車(chē)確認(rèn)
    • 選擇配置項(xiàng)根據(jù)需求選擇 y/n
  • 進(jìn)入目錄cd vuecli 執(zhí)行cnpm isntall安裝依賴(lài)
  • npm run dev運(yùn)行項(xiàng)目

vuex

功能

  • 實(shí)現(xiàn)各組件的數(shù)據(jù)交互

安裝

  • 進(jìn)入目錄cd vuecli
  • 安裝vuex cnpm install vuex --save

使用

  • main.js 增加以下內(nèi)容

    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,//增加 （調(diào)用vuex）鍵值對(duì)的 鍵 是 固定的 不能修改
  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

功能

  • 實(shí)現(xiàn) ajax

安裝

  • 進(jìn)入目錄cd vuecli
  • 安裝cnpm install vue-resource --save

使用

  • main.js 增加以下內(nèi)容
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 }
})
  • 然后就可以在項(xiàng)目中通過(guò)this.$http來(lái)調(diào)用對(duì)應(yīng)的方法（比如調(diào)用get和post請(qǐng)求）
created:function (){
  this.$http.post("getList",{user:'tangcaiye'})
    .then(function (data){
    console.log(data)
  })
}

其他的方法: api文檔

json-server

功能

  • 搭建API數(shù)據(jù)接口

安裝

  • 進(jìn)入目錄cd vuecli

  • 安裝：cnpm intall json-server --save-dev

使用

  • 首先創(chuàng)建一個(gè)db.json，放在根目錄（vuecli）下就可以了，它用于存放接口調(diào)用時(shí)的數(shù)據(jù).比如：
{
  "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')
})

現(xiàn)在在瀏覽器中訪問(wèn)http://localhost:8081應(yīng)該就能進(jìn)到j(luò)sonserver頁(yè)面中

但因?yàn)?code>jsonserver服務(wù)器的端口號(hào)跟我們的服務(wù)器端口不一樣，也就是跨域了，所以可以在vue-cli中設(shè)置代理:

  • 設(shè)置代理

在config/index.js中的設(shè)置proxyTable的值為：

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

其中 '/api' 為匹配項(xiàng)，target 為被請(qǐng)求的地址

因?yàn)樵?ajax 的 url 中加了前綴 '/api'，而原本的接口是沒(méi)有這個(gè)前綴的

所以需要通過(guò) pathRewrite 來(lái)重寫(xiě)地址，將前綴 '/api' 轉(zhuǎn)為 '/'

如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉

  • 訪問(wèn)數(shù)據(jù)的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

進(jìn)入目錄cd vuecli

cnpm install less-loader less --save-dev

使用

  • 在 ***.vue 的文件內(nèi)的 style 標(biāo)簽內(nèi) 加上 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

功能

  • 輪播圖等

安裝

進(jìn)入目錄cd vuecli

cnpm install vue-awesome-swiper --save

使用

  • 全局配置 swiper 打開(kāi) 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 -->
    <!-- 導(dǎo)航點(diǎn) -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- 上一頁(yè) -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <!-- 下一頁(yè) -->
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- 滾動(dòng)條 -->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>
 
<script>
  // swiper options example:
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // notNextTick是一個(gè)組件自有屬性，如果notNextTick設(shè)置為true，組件則不會(huì)通過(guò)NextTick來(lái)實(shí)例化swiper，也就意味著你可以在第一時(shí)間獲取到swiper對(duì)象，假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來(lái)做什么事，那么這個(gè)屬性一定要是true
          notNextTick: true,
          // swiper configs 所有的配置同swiper官方api配置
          autoplay: 3000, //輪播時(shí)間
          pagination : '.swiper-pagination',//導(dǎo)航點(diǎn)依賴(lài)
          prevButton:'.swiper-button-prev',//上一頁(yè)依賴(lài)
          nextButton:'.swiper-button-next',//下一頁(yè)依賴(lài)
          scrollbar:'.swiper-scrollbar',//滾動(dòng)條依賴(lài)
          mousewheelControl : true,//是否開(kāi)啟鼠標(biāo)控制Swiper切換
          observeParents:true,//當(dāng)Swiper的父元素變化時(shí)，Swiper更新。
          loop : true,//環(huán)路
          autoplayDisableOnInteraction : false,//用戶操作后是否重啟autoplay
        }
      }
    }
  }
</script>

附錄1： NPM常用指令

  • npm -v: 查看npm安裝的版本
  • npm init: 引導(dǎo)你創(chuàng)建一個(gè)package.json文件，包括名稱(chēng)、版本、作者這些信息等
  • npm install <modulename>: 安裝模塊
  • npm install <modulename> -g: 安裝全局模塊
  • npm install <modulename>@1.0.0: 安裝指定版本的模塊
  • npm install <modulename> -save: 安裝模塊并添加到package.json依賴(lài)中
  • npm uninstall <modulename>: 卸載模塊
  • npm cache clean: 清除緩存
  • npm help: 查看幫助命令
  • npm ls: 查看當(dāng)前目錄安裝的依賴(lài)
  • npm ls -g: 查看全局目錄安裝的依賴(lài)
  • npm view <modulename>: 查看包的package.json
  • npm view <modulename> dependencies: 查看包的依賴(lài)關(guān)系
  • 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 實(shí)例創(chuàng)建前狀態(tài)===============》');
               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 實(shí)例創(chuàng)建完畢狀態(tài)===============》');
            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 事件掛載前狀態(tài)===============》');
            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 事件掛載結(jié)束狀態(tài)===============》');
            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 數(shù)據(jù)更新前狀態(tài)===============》');
            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 數(shù)據(jù)更新完成狀態(tài)===============》');
            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 實(shí)例銷(xiāo)毀前狀態(tài)===============》');
            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 實(shí)例銷(xiāo)毀完成狀態(tài)===============》');
            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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文作者 Jinkey（微信公眾號(hào) jinkey-love，官網(wǎng) https://jinkey.ai）原文鏈接 h...
    JinkeyAI閱讀 426,025評(píng)論 152贊 921
  • 2020.5.6 周六，晴，萬(wàn)里無(wú)云。陽(yáng)光在碧澄的天空中印下了無(wú)數(shù)五彩光圈?？吹竭@太陽(yáng)，心中卻有些陌生啊。 我再次...
    殤璃小末閱讀 293評(píng)論 0贊 1
  • 魯言閱讀 310評(píng)論 0贊 0
  • 我曾經(jīng)彷徨過(guò)， 在摔過(guò)了諸多跟頭的泥濘中， 淋漓的泥漿模糊了我的視線， 也打濕了我熱切的渴望， 我倒在凄冷的風(fēng)中獨(dú)...
    悅者閱讀 388評(píng)論 0贊 5
  • 知音，不需言多，用心去交流，友誼，不能言表，要用心去品嘗。 從上小學(xué)起，老師就不停給我們灌輸，同學(xué)之...
    愛(ài)情是短暫的閱讀 402評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容