Vue2+Element项目初始化

最新推荐文章于 2024-07-11 00:22:08 发布

爱套猴的大马猴

最新推荐文章于 2024-07-11 00:22:08 发布

阅读量476

点赞数

分类专栏：前端文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_45932704/article/details/127523238

版权

本文档详细介绍了如何初始化一个Vue2结合ElementUI的项目，包括创建项目、配置路由和解决eslint规范问题。首先，确保安装了Vue和Node.js，然后使用Vue CLI创建项目。在配置路由时，需要注意vue-router的版本，vue2仅兼容vue-router3。接着，新建router目录并配置路由。同时，修改App.vue并创建HelloApp.vue组件。最后，为遵循eslint规范，创建新的规则文件以允许短名称vue文件。

摘要由CSDN通过智能技术生成

项目初始化

创建项目

在初始化前要做好vue的安装工作（因为要是命令行使用npm安装，所以node.js肯定也要安装）：输入以下三个命令：
初始化项目：Creating a Project | Vue CLI (vuejs.org)，在执行vue create + 项目名命令时，系统会默认生成一套新项目模型，默认设置非常适合快速制作新项目的原型，选择vue2
打开项目，找到package.json文件，运行serve，项目就可以成功启动

配置路由

打开终端，通过 npm install --save vue-router@3.5.3命令安装，如果控制台报错，运行npm install --save vue-router@3.5.3 --force命令强制安装，注意：vue2只能安装vue-router3版本，不能安装4版本，否则使用vue-router时会报错，安装完成后打开package.json文件查看是否存在vue-router依赖
在src文件夹下新建router目录，在其中新建router.js文件，用于存放项目的路由
打开src下的main.js文件，将router引入，新增以下配置，如果这里VueRouter下有波浪线，说明vue-router依赖版本有误
修改App.vue的内容，移除HelloWorld.vue，增加router-view
在Components目录下新建HelloApp.vue，这里文件的名称必须为类命名方式或单词之间使用-连接，否则会报错（eslint规范，若想使用单个单词命名，见文章最后的配置）：
在router.js中引入路由

//  路由配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用路由中间件
Vue.use(VueRouter)

// 路由表
const routes = [
    {
   
        path: '/app',
        component: () => import