搭建VUE+ElementUI开发环境以及路由页面

一、前言

本文章会说明如何搭建VUE环境并创建一个测试项目启动，以及安装编辑器vscode并通过编辑器引入element-ui，再路由一个页面测试element-ui是否可用。

二、安装Node.js

搭建vue需要先安装node.js，node.js是一个JavaScript运行环境。

下载地址：Node.js

左边的为稳定版，右边的为尝鲜版，尝鲜版是新版测试版会发布一些新功能可以提前体验但是不够稳定，这里以稳定版为例进行下载安装，下载完成后打开一直点击next就可以了，环境变量会自动设置好。

安装完成后，win+r输入cmd进入测试是否安装成功。

输入node -v查看node版本,npm -v查看npm版本，显示版本号就安装成功了。

node -v

npm -v

三、安装webpack及vue-cli

（一）、安装webpack

npm install webpack -g

如果卡在这里可以通过配置镜像进行下载

配置镜像：

npm config set registry http://registry.npmmirror.com

查看目前配置的镜像地址：

npm config get registry

显示镜像地址则说明配置成功了

重新进行安装，没有任何报错就完成了webpack的安装

（二）、安装vue-cli

npm install vue-cli -g

这样就完成了vue-cli的安装

四、创建项目

新建一个文件夹，并复制该文件夹路径，在cmd里通过cd进入到该文件夹

通过vue create vuetest，创建vue项目，此处vuetest为项目名

出现该内容，先执行第一条卸载vue-cli2再执行第二条安装vue-cli3

npm uninstall -g vue-cli

npm install -g @vue/cli

完成后再次尝试创建项目

此处第一个为vue3的快速搭建，第二个为vue2的快速搭建，第三个为自定义，这里选择第三个自定义为例。

这里需要通过space，也就是空格来进行选择，这里重点需要勾选的有Router、VueX，同时需要把Linter/Formatter取消勾选，这个是语法检查，对语法会更加严格，勾上可能会导致后面引入element-ui出错

回车确认后，这里是选择vue的版本，这里以vue2为例子

路由模式选择yes

第三方配置选择第一个In dedicated config files

这里是是否将此次设置为模板，如果选择y则下次快速搭建就保留该配置，如果选择n则下次需要重新进行配置，这里以n为例

接下来进行等待，等待项目搭建完成

项目搭建完成后根据提示可以知道通过cd vuetest进入该项目路径，然后npm run serve运行

运行后将network地址复制并打开

出现该介绍页面就成功完成了

五、安装VScode

下载地址：Visual Studio Code - Code Editing. Redefined

通过下载地址可以直接下载并安装，安装完成打开后

可以选择扩展，搜索Chinese安装中文语言包，重启VScode就可以生效

点开文件，打开文件夹选择Test文件夹，或者直接将文件夹拖到VScode图标都能打开，可以看到vue项目已经创建好了

选择新建终端，进入到项目路径中，输入npm run serve也可以进行运行

npm run serve

这里可以直接按住CTRL并点击地址就可以打开

六、在VScode中引入elementUI

（一）、在vscode中安装elementUI

npm i element-ui -S

如果安装出现错误的话，可能是在搭建项目时勾选了语法检测，解决方法可以通过错误提示解决错误后重新安装，或者将package.json中存在的语法检测的依赖删除再进行安装。

以下是安装完成后图例

安装完成后，在main.js中引入elementUI

import ElementUI from 'element-ui'

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

Vue.use(ElementUI)

（二）、路由一个页面测试elementUI是否可用

打开elementUI网址：Element - The world's most popular Vue UI framework

选择想要使用的组件，这里以按钮为例，打开显示代码并复制

把项目自带的两个默认页面home和about删除，并创建一个home文件夹再创建一个Home.vue文件，将代码复制进去

打开router文件夹中的index.js文件，将路由重新配置

这里需要改成文件路径

import Home from '../views/home/Home.vue'

 这里需要改成文件名

    component: Home

 再将多余的about的路由删除

打开App.vue，将原来的链接删除

重新运行项目，可以看到内容已经生效