安裝

npm 安裝

npm install vue
#直接下載使用
https://vuejs.org/js/vue.min.js

cnpm安裝

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

vue-cli 腳手架

cnpm install -g vue-cli 

使用腳手架構建專案

#首先cd到自己指定目錄,執行
vue init webpack <目錄名稱>
#注意在安裝是不啟用Eslint，否則開發過程中縮排問題很頭疼
cd <目錄>
#安裝依賴包（package.json）
cnpm install
cnpm run dev 
#去瀏覽器開啟localhost:8080
#這裡簡單介紹下 npm run dev 命令，其中的“run”對應的是package.json檔案中，scripts欄位中的dev，也就是 node build/dev-server.js命令的一個快捷方式。
#專案打包
cnpm run build
 

目錄結構

vue縮排報錯

#不開啟Eslint即可，在使用vue-cli搭建專案的過程中不啟用Eslint
#/router

例項配置

#主要是在src下的conmponents下進行開發
#src/router/index.js下配置
import Vue from 'vue'
import Router from 'vue-router'
import Header from '@/components/header'
import movieList from '@/components/movieList'
import cinemaList from '@/components/cinemaList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'movieList',
      component: movieList
    },
    {
      path: '/movieList',
      name: 'movieList',
      component: movieList
    },
    {
      path: '/cinemaList',
      name: 'cinemaList',
      component: cinemaList
    }
  ],
  history: true
})

# /config/index.php中配置代理 proxyTable

#/src/main.js 修改入口檔案
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Home from './pages/home'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Home/>',
  components: { Home }
})