vue+element

您所在的位置：网站首页 › sofa框架简单搭建 › vue+element

vue+element

2023-07-25 01:10| 来源: 网络整理| 查看: 265

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

目录 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

Go to 首页 Go to Foo Go to ElementUI export default { name: 'App' } #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; }

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

this is my foo page {{fooInfo}} export default { name: "Foo", data() { return { fooInfo: 'this is foo info' } } }

Bar.vue

测试element-ui 默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮 export default { name: "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模板。如图：在这里插入图片描述

【本文地址】

vue+element

vue+element

今日新闻

推荐新闻