利用脚手架搭建一个vue+elementUI的开发环境的步骤

利用脚手架搭建一个vue+elementUI的开发环境的步骤

01 NODEJS安装

前后端分离框架，前端通常采用的都是NODEJS服务器。

VUE的运行，需要依赖于node的npm包管理工具。

NodeJS的下载地址：

• Node.js

查看node版本

node -v

02 安装CNPM

因为npm是使用的国外的镜像，最好还是使用cnpm，这样使用阿里的镜像，国内的速度快。淘宝的cnpm代替npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

03 安装vue-cli脚手架

cnpm install --global vue-cli

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

注意一点： vue-cli安装的是vue2.x版本。vue3，脚手架变更了。

04 创建项目

通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

vue init webpack

注意：目录的名字，已经通过资源管理器建立了，所以 vue init webpack的时候，不用再输入项目名称了。

出现了错误：

注意：这个错误之所以产生，就是因为，网络上被禁用了github.com访问权限。解决办法：可以变更为，无线网络，或者放开github的访问权限。

05 安装依赖

cnpm install  

06 运行项目

npm run dev

07 修改访问端口

08 目录结构及对应作用

09 安装elementUI

npm i element-ui -S

注意：有的时候，npm非常的慢，可以考虑变更为cnpm使用。

cnpm install element-ui  --save

如果没有--save的话，需要：【注意：还原组件依赖】 cnpm install ， 会将package.json中配置的所有依赖组件下载到本地项目中。主要是在下载的时候，比较慢的情况下，需要使用cnpm比较好。

10 修改代码测试验证

Home.vue

-- 主页修改

<template>
    <div class='home'>
        <el-button type='primary'>主要按钮</el-button>
    </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>

</style>

router --

--index.js 路由修改

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

http://localhost:8080

访问网页，就可以看到一个按钮的效果。