vue+element-ui框架简单搭建

本文简单介绍如何搭建一个简单前端框架

目录

1.安装node.js

2.安装vue及依赖包

3.配置项目

简单安装过程：

1.安装node.js

这个直接推荐一篇菜鸟安装教程，包含windows和linux下安装，传送门如何安装node.js

2.安装vue及依赖包

安装好node.js后，就已经安装了npm。但是直接使用npm下载组件会很慢，我们首先安装淘宝镜像。
一下命令都是通过打开cmd控制台里面运行，除了特别提醒需要cd到某些目录下运行的意外，其他的都直接在cmd根目录运行即可。

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

安装完淘宝镜像后就可以较快的安装如下模块了。
全局安装webpack(安装过程可能会出错，如果出错，可以关掉cmd,重新打开，并使用npm install webpack -g命令重新安装，即不使用淘宝镜像)

cnpm install webpack -g

全局安装vue-cli脚手架

npm install vue-cli -g

接下来测试下是否成功安装了vue，cmd控制台输入：

vue -V

可以查看到vue版本，如图：

创建一个vue项目
首先选择需要将创建的目录放到哪个位置，使用cd命令切换到目录下（或者直接在桌面的计算机中打开到该目录，在地址栏输入cmd回车切换到该目录）如图，我这里将项目放到E:\eclipse-workspace里面：

该目录下输入命令创建项目

vue init webpack frame-front

如图，有选择(y/n)提示的可以根据下图选择，没有提示的可以直接回车

本目录下安装项目依赖

cnpm install

本目录下安装element-ui

cnpm i element-ui -S

到这里，已经基本完成项目的创建，可以cd到项目目录下运行测试，我的目录为E:\eclipse-workspace\frame-front，

输入命令

npm run dev

运行完毕后

在浏览器输入地址http://localhost:8080/#/即可以看到默认页面。

3.配置项目

这里我们使用webstorm2018来编辑项目，可以自己百度下载一个，需要安装破解。
或者使用其他编辑器。项目目录结构：

修改src/main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入路由配置（如果安装时有选择安装路由，这里默认已经配置好)
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
  // components: { App },
  // template: '<App/>'
})

修改App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/">Go to 首页</router-link>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to ElementUI</router-link>
    </div>
    <!-- 承载路由，路由匹配到的组件显示在这里 -->
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components下新建两个vue文件Foo.vue和Bar.vue（命名随意，记得在配置路由的时候使用配置自己命名的就可以）
Foo.vue

<template>
    <div id="foo">
        <h1>this is my foo page</h1>
        <div>
            {{fooInfo}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "Foo",
        data() {
            return {
                fooInfo: 'this is foo info'
            }
        }
    }
</script>

<style scoped>

</style>

Bar.vue

<template>
    <div id="bar">
        <div>
            测试element-ui
        </div>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Bar.vue"
    }
</script>

<style scoped>

</style>

修改router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Foo from '@/components/Foo'
import Bar from '@/components/Bar'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/foo',
      name: 'Foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'Bar',
      component: Bar
    }
  ]
})

打开cmd,cd到项目目录下（如我的E:\eclipse-workspace\frame-front），重新运行项目：

npm run dev

之后浏览器输入地址http://localhost:8080/#/，可以看到如下页面，分别点击Go to 首页 、Go to Foo 、Go to ElementUI，可以看到切换了页面显示，其中go to elementUI页面引用的是elementUI模板。如图：