VUE从零开始

环境搭建

这个不说了。。。

初始页面设置

1、VUE项目启动之后，会出现一个默认的界面，我们需要修改它，变成自己的东西
2、router路由机制暂时没有深入学习，此处略过，只需要知道一些简单的就可以了

• 首先vue默认的HelloWorld页面是在router文件夹下的index.js中，在这里我们将之进行更改，变成我们自己的路由

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/pages/Home/home'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

此处我将pages/Home/home进行了变更，于是上面routes中对应内容改成了自己的

• 在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 App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h (App),
  // 这个地方写成这样，可以使用router，不懂但是能用
})

• 在App.vue中将<img src="./assets/logo.png">删掉

现在应该可以使用自己的组件化界面了

• 如果要使用Element-UI，需要先进行全局安装
  npm i element-ui -S 注意此处的s要大写

• 安装后，需要前往main.js中全局注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(ElementUI, {locale})