工程搭建 笔记1

一.环境搭建: 

1. node -v

2. npm -v

3. npm install --g vue-cli

二. 新建项目

 vue ui 

三. 安装 element-ui

1. npm install element-ui --save

2. 在main.js 中引入 element-ui依赖

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入ui依赖
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
// 全局使用
Vue.use(Element)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 去element-ui 找一个组件测试, 直接放任意组件中

　　

四. 安装 axios 

1. npm install axios --save

2.在main.js 中引入 ,并全局使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入axios
import axios from 'axios'
// 引入ui依赖
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

// 全局使用
Vue.use(Element)

Vue.config.productionTip = false
// 全局使用
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

　

五. 配置路由:

1.在router.js中:

import Vue from 'vue'
import Router from 'vue-router'
import login from './views/login.vue'
import Blogs from './views/Blogs.vue'
import BlogEdit from './views/BlogEdit.vue'
import BlogDetail from './views/BlogDetail.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Index',
      // 重定向
      redirect: { name: "Blogs" }
    },
    {
      path: '/blogs',
      name: 'Blogs',
      component: Blogs
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      // 传参
      path: '/blog/add',
      name: 'BlogEdit',
      component: BlogEdit
    },
    {
      path: '/blog/:blogId',
      name: 'BlogDetail',
      component: BlogDetail
    },
    {
      // 传参
      path: '/blog/:blogId/edit',
      name: 'BlogEdit',
      component: BlogEdit
    },
  ]
})

2.测试路由跳转