【记录·前端篇1】vscode创建vue+ElementUI项目

一、初步创建vue项目&＃xff0c;运行

         参考&＃xff1a;VUE 使用 vue create 命令 创建 vue2.0 项目

二、创建配置router路由信息

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

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

import Vue from "vue";

import VueRouter from &＃39;vue-router&＃39;

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

// 使用路由

Vue.use(VueRouter);

// 创建VueRouter的实例

const router &＃61; new VueRouter({

     mode:&＃39;history&＃39;,

     routes: [

        {

          path: "/",

          name:&＃39;home&＃39;,

          component: HelloWord,

        }

      ]

})

// 导入路由实例

export default router

        3.修改main.js&＃xff0c;把router对象注册到vue中。

import Vue from &＃39;vue&＃39;

import App from &＃39;./App.vue&＃39;

// 引入导出的路由

import router from &＃39;./router/index&＃39;

Vue.config.productionTip &＃61; false

new Vue({

  // 注册路由

  router,

  render: h &＃61;> h(App),

}).$mount(&＃39;#app&＃39;)

        4.修改App.vue页面

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

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

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

    // 关闭组件命名规则

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

 Index.vue

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

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

四、引入ElementUI框架

     1.在终端执行指令&＃xff1a;npm i element-ui -S  或  npm install element-ui --save

     2. 在main.js中引入  

 // 导入element-ui

import ElementUi from &＃39;element-ui&＃39;

import &＃39;element-ui/lib/theme-chalk/index.css&＃39;

Vue.use(ElementUi)