vue教程

1.环境安装

下载node.js并安装

http://nodejs.cn/download/

查看node及npm版本,nodejs安装自动安装了npm

设置加速镜像

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

安装cnpm

npm install cnpm -g

安装vue-cli

cnpm install vue-cli -g

vue版本

vue -V

安装webpack

cnpm install webpack -g

使用webpack模版初始化vue项目

vue init webpack xiayuFrontEnd

cnpm install

cnpm run dev

访问http://localhost:8081

安装模块打包工具

cnpm install webpack -g

cnpm install webpack-cli -g

idea安装vue插件（使用电脑网络一直搜索不到vue，换成手机热点网络后就可以了）

2.vue-route路由

安装vue-router

cnpm install vue-router --save-dev

在main.js中导入VueRouter

import VueRouter from 'vue-router'

Vue.user(VueRouter)

定义路由

import Vue from 'vue' //import vue
import VueRouter from 'vue-router' //import vue-router
import HelloWorld from '../components/HelloWorld' //import hellworld 组件
import Home from '../components/Home' //导入home组件
import MainContent from '../components/MainContent' //导入mainContent组件

Vue.use(VueRouter); //vue使用VueRouter

export default new VueRouter({ //暴露VueRouter给main.js使用
  routes: [ //定义路由  
    {
      path: '/mainContent', //路由路径
      name: 'mainContent', //路由名称
      component: MainContent //组件名称
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/helloWorld',
      name: 'helloWorld',
      component: HelloWorld
    }]
});

main.js中加入路由组件

import Vue from 'vue' 
import App from './App'
import router from './router'  //导入自定义的路由组件

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router, //交给Vue管理
  components: { App },
  template: ''
})

设置路由模式

在路由配置中加入，默认为hash
mode: 'history',

3.axios

cnpm install axios

4.使用element ui

cnpm i element-ui -S