vue 項目搭建

cli 方式安裝      集成了內置webpack 模塊

安裝步驟

  一、全局安裝 vue-cli

$ npm install --global vue-cli

 

二、 建立一個基於 webpack 模板的新項目

$ vue init webpack my-project

三、安裝依賴，走你

$ cd my-project
$ npm install
$ npm run dev

若是npm安裝慢的話 可使用淘寶鏡像

   

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


cnpm install webpack -D

項目結構簡單介紹

 build 目錄是一些webpack的文件，配置參數什麼的，通常不用動 

config 是vue項目的基本配置文件
node_modules 是項目中安裝的依賴模塊
src 源碼文件夾，基本上文件都應該放在這裏。
—assets 資源文件夾，裏面放一些靜態資源
—components 這裏放的都是各個組件文件
—App.vue  App.vue組件
—main.js 入口文件
static 生成好的文件會放在這個目錄下。
test 測試文件夾，測試都寫在這裏
.babelrc babel 編譯參數，vue開發須要babel編譯
.editorconfig  看名字是編輯器配置文件，不曉得是哪款編輯器，沒有使用過。
.gitignore  用來過濾一些版本控制的文件，好比node_modules文件夾
index.html  主頁
package.json  項目文件，記載着一些命令和依賴還有簡要的項目描述信息
README.md  介紹本身這個項目的，想怎麼寫怎麼寫。不會寫就參照github上star多的項目，看人家怎麼寫的

package.json

ependencies：項目發佈時的依賴

devDependencies：項目開發時的依賴
scripts：編譯項目的一些命令

 

.babelrc文件定義了ES6的轉碼規則，基於ES6編寫的js代碼在編譯時都會被babel轉碼器轉換爲ES5代碼。

min.js文件介紹

 這裏是入口文件，能夠引入一些插件或靜態資源，固然引入以前要先安裝了該插件，在package.json文件中有記錄。

/*引入Vue框架*/
import Vue from 'vue'
/*引入資源請求插件*/
import VueResource from 'vue-resource'
/*重置樣式*/
import "assets/css/base.css"
/*基本JS*/
import "assets/js/common.js"
/*引入路由設置*/
import "./routers.js"
/*使用VueResource插件*/
Vue.use(VueResource)

App.vue 

這是一個標準的vue組件，包含三個部分，一個是模板，一個是script，一個是樣式，這裏須要瞭解vue的基礎。

<template>
 <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 vue-route

官網路由中文手冊

做用：

經過管理url實現url和組件的對應，

經過url進行組件之間的切換

必須引入router組件 是單獨文件

 

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 經過傳入 `to` 屬性指定連接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這裏 -->
  <router-view></router-view>
</div>

 模板中使用標籤介紹

自定義導航標籤

ag="li"
tag="div"
 <router-view tag="li"></router-view>

         <router-link to="/user" tag="div" event="mouseover"> 用戶</router-link>
        <router-link to="/home" tag="li"> 主頁</router-link>
        <router-link to="/about" tag="li" active-class="lishuang-active"> 關於</router-link>

 統一設置class 名字

new VueRouter({
  mode: 'history',
  linkActiveClass: 'active', //給全部導航統一設置class名字

 單獨給導航設置樣式名字 

<router-link active-class="lishuang-active"> 
  active-class="lishuang-active"

 exact 精準匹配

 當你把導航設置到 '/' 導航的激活樣式 不管點擊哪一個都會匹配到跟，這是問題，

 在導航裏面添加 exact 就能夠把這個問題解決

<router-link to="/" exact tag="li"> <a> 首頁 </a></router-link> <span class="sr-only">(current)</span>

命名視圖

在同級同時展現多個視圖，而不是嵌套

   <router-view class="text-center" name="slider"></router-view>
        <router-view class="text-center"></router-view>
      
      在路由裏面寫：
      記住 component  -> components
      {
      path: '/blog',
      components: {
        default:Blog,
        slider:Slider
      }
    }

動態路徑

咱們常常須要把某種模式匹配到的全部路由，全都映射到同個組件。例如，咱們有一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，咱們能夠在 vue-router 的路由路徑中使用『動態路徑參數』

space：
當這個頁面是商品列表
點擊這個列表進去商品詳情
這個商品詳情展現信息，就是經過某個商品的id 去請求api獲得的數據。
這個id 怎麼來呢？
space2：
當點擊用戶列表的時候 進入詳情，須要根據url上面攜帶的id 來請求api數據

axios使用

安裝

npm i axios vue-axios -D

在main.js 入口文件裏面寫

import Axios from 'axios'
  import VueAxios from 'vue-axios'

  Vue.use(VueAxios,Axios)

在其它組件裏面調用

 export default {
    name: 'blog',
    created () {
      this.getGoods()
    },
    methods: {
      getGoods () {
        this.$http.get('http://lc.shudong.wang/api_goods.php')
          .then((res) => {
            console.log(res.data)
          })
          .catch((error) => {
            console.log(error)
          })
      }
    }
  }

 vue UI組件

使用目的：

提升開發效率
直接拿過來用

bootstrap

elementUi

安裝

npm ielement-ui -D

引入 main.js 入口文件

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'Vue.use(ElementUI)