vscode创建vue+ElementUI项目

一、初步创建vue项目，运行

         参考：VUE 使用 vue create 命令 创建 vue2.0 项目

二、创建配置router路由信息

       1. 执行命：npm install vue-router@3.5.2 进行安装。这里安装3.5.2的版本，如果不小心执行了安装了最新版本4.x.x，可使用 npm uninstall vue-router -S卸载最新版本。最新版本可能导致配置路由的时候出现export 'default' (imported as 'VueRouter') was not found in 'vue-router' ....的错误。

       2. 在src下创建一个router文件夹，并创建 index.js，并导入默认的HolloWorld页面，配置为默认访问路径

import Vue from "vue";

import VueRouter from 'vue-router'

import HelloWord from "../components/HelloWorld.vue";

// 使用路由

Vue.use(VueRouter);

// 创建VueRouter的实例

const router = new VueRouter({

     mode:'history',

     routes: [

        {

          path: "/",

          name:'home',

          component: HelloWord,

        }

      ]

})

// 导入路由实例

export default router

        3.修改main.js，把router对象注册到vue中。

import Vue from 'vue'

import App from './App.vue'

// 引入导出的路由

import router from './router/index'

Vue.config.productionTip = false

new Vue({

  // 注册路由

  router,

  render: h => h(App),

}).$mount('#app')

        4.修改App.vue页面

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App'

}

</script>

         5.访问项目http://localhost:8080/ 正常打开

 三、创建新的访问测试页面Index

        1. 在components文件下创建Index.vue页面，后续其他公共组件也同样添加在该components目录下，如：自定义的翻页组件、弹窗组件、Echarts组件等。如果报错 error  Component name "Index" should always be multi-word  vue/multi-word-component-names，只需在.eslintrc.js文件中添加如下代码即可

    // 关闭组件命名规则

    "vue/multi-word-component-names":"off"

 Index.vue

<template>

    <div>版本号：{{version}}</div>

</template>

<script>

export default {

  name: 'Index',

  data () {

    return {

      // 版本号

      version: '3.3.0'

    }

  },

  methods: {

    goTarget (href) {

      window.open(href, '_blank')

    }

  }

}

</script>

         2. 在router下的index.js添加路由      

        3. 访问http://localhost:8080/index测试       

四、引入ElementUI框架

     1.在终端执行指令：npm i element-ui -S  或  npm install element-ui --save

     2. 在main.js中引入  

 // 导入element-ui

import ElementUi from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUi)