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.vue

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

Bar.vue

修改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模板。如图：