前提

本机安装了node.js 通过node.js自带的npm 安装下载了vue脚手架 npm install vue-cli -g

使用命令来搭建项目骨架 vue list 查看所有模板名称

创建项目


             模板名称       项目名称             
vue init webpack-simple  myvuedeom

Vue最基本结构图

引入element ui

npm i element-ui -S

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

报错

ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

解决方法最终找到问题，是字体文件中的’ '符号没有识别。

需要用file-loader进行转换

在 webpack.config.js 添加配置

{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
}

添加位置如下

重新启动，问题解决

axios

npm install axios

在main.js中全局注册基于vue的axios在main.js进行封装

 import axios from 'axios' //把 `axios` 加到 `Vue` 的原型中 

axios.defaults.baseURL = 'http://localhost:8080'

 Vue.prototype.axios = axios;

在 .vue 文件中使用时，注意 axios 前要加 this

 methods:{
        send(){
            // 注意：因为 axios 是加到 Vue 的原型中了，所以使用 axios 方法时，前面需要加 this
            this.axios.get('/user/allByPage')
            .then(resp => {
                console.log(resp.data)
            }).catch(err => {
                console.log(err);
            })
        }
    }

路由

安装：npm install vue-router

src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：


import add from '../component/AddUser'  //引入根目录下的组件


export  const  routes=[
  {
    path:'/add',
    component:add,
  }

]

main.js

import VueRouter from 'vue-router'

import {routes} from './router/index'

const router=new VueRouter({
  routes:routes
})
Vue.use(VueRouter)
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

报错

"export 'default' (imported as 'VueRouter') was not found in 'vue-router'、

找到这个package.json，把里面的vue-rounter版本修改一下如上图，我改成了3.0.1就ok了

app.vue

<template>
  <div id="app">
    <router-view></router-view> <!--根据路由更换的组件放在了router-view中，实现页面的跳转-->
  </div>
</template>

<script>
  export default {
    name: 'app',
  }
</script>

<style scoped>
</style>

Vue脚手架的使用

前提

引入element ui

报错

axios

路由

报错