Vue+Element UI脚手架搭建
Element是由饿了么开发的一款基于前端框架vue的UI框架,而vue是基于node.js的,所以使用前需要下载node。node下载::https://nodejs.org/zh-cn/; 不了解vue可参考:https://cn.vuejs.org/v2/guide/index.html;不了解node.js可参考菜鸟教程https://blog.csdn.net/java...
一. node.js安装:
-
Element是由饿了么开发的一款基于前端框架vue.js的UI框架,而vue.js是基于node.js的,所以使用前需要下载node。
-
node下载::https://nodejs.org/zh-cn/ ;
不了解vue可参考:https://cn.vuejs.org/v2/guide/index.html ;
不了解node.js可参考菜鸟教程: https://blog.csdn.net/javahighness/article/details/79702157
-
下载后打开命令行窗口输入node -v,如果现实版本号证明成功。
二. vue脚手架安装:
- node安装完后需要下载vue,在命令行输入:npm install vue ;
- 使用vue需要安装vue脚手架框架:npm install -g vue-cli(其中-g表示全局安装)
- 然后新建一个工作空间,命令行进入该目录(win10只需在工作空间空白处按住shift右键在此处打开PowerShell窗口)
- 进入工作空间后输入:vue init webpack project_name(项目名称),
按提示进行初始化(按回车,配置安装默认为yes)
初始化完成后会出现命令提示输入提示命令cd deom ; npm run dev;
完成后会出现访问地址,打开浏览器访问即可
三. Element组件安装:
- Vue脚手架安装成功后,便可以安装Element组件;
Element官网地址: http://element-cn.eleme.io/#/zh-CN
Element 脚手架 代码git地址: https://github.com/ElementUI/element-starter.git
点击Clone or download 将代码clone或者download到本地,进入element-starter目录命令行(同上) - 进去后输入:npm install -g yarn下载yarn(资源管理系统),
然后执行:npm install
最后执行:npm run dev
然后根据提示,在浏览器打开 http://127.0.0.1:8010
证明安装成功
四. Element访问流程:
-
接下来进入element-starter下的src文件夹,新建三个文件夹分别是view(自己的页面),components(自己的组件),router(路由)
-
然后在view里面新建Login文件夹(不同页面放在不同的文件夹),在文件夹里面新建index.html
data(){}里面存放数据,Created(){}里面执行方法,methods:{}里面定义方法(默认为空就行,我的代码是之前写的) -
在router下新建routers.js;
在命令行输入:npm install vue-router --save;下载路由
配置路径,path是跟在项目的webpack.config.js中的devserver的host:port路径后面,
export default routes; 导入main.js里面的router -
修改main.js文件
Vue.use(vuerouter)使用vue-router组件;
const router:定义一个路由常量,mode:history表示在地址栏输入时不需要输入#号(默认他自带的有#号)
注意:途中三个名字要相同,否则访问不成功
-
然后在改目录命令行输入:npm run dev 跑起来,在浏览器输入localhost:8010可以看见访问成功
根据以上流程你可以修改path路径获取页面信息。
五. 访问服务器接口:
- 下载axios ,一个基于 promise 的 HTTP 库,使用他来访问接口,
在element-starter目录命令行输入npm install vue-router --save
修改webpack.config.js中的target该为访问路径到端口号结束
修改App.vue文件,添加一个路由的标签
修改main.js文件导入axios
修改index.html
在改目录命令行输入:npm run dev 跑起来,在浏览器输入localhost:8010可以看见访问成功
更多推荐
所有评论(0)