vue部署

安装

npm 安装

npm install vue
#直接下载使用
https://vuejs.org/js/vue.min.js
1
2
3

cnpm安装

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

vue-cli 脚手架

cnpm install -g vue-cli 
1

使用脚手架构建项目

#首先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
1
2
3
4
5
6
7
8
9
10
11

目录结构

vue缩进报错

#不开启Eslint即可，在使用vue-cli搭建项目的过程中不启用Eslint
#/router
1
2

实例配置

#主要是在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 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49