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

安裝步驟

1、全局安裝 vue-cli

$ npm install --global vue-cli

2、 創建一個基於 webpack 模板的新項目

$ vue init webpack my-project

3、安裝依賴，走你

$ 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

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)

vue 項目搭建