目的
基于Vue.js和Element UI搭建一个可以开发的基础Web项目。
介绍
Vue.js
- Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层, 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- Vue 学习起来非常简单.
学习途径
个人理解
- 是一套方便开发Html+Css+Js的方便框架
Element UI
- Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。
学习途径
个人理解
- 对于开发Web来说,节省了你大量的时间去写样式,专注于功能开发。
操作步骤
安装Node.js
控制台
- 输入node -v
出现版本信息,恭喜你成功了。
其他博主,安装实例
安装Vue
步骤一
- cmd或者git窗口中输入
npm install--global vue-cli
- 检查是否安装成功,cmd或git中输入
vue -V //大写
出现以下场景
恭喜你安装成功!!
创建Vue项目
- 找一个空文件夹输入
vue init webpack mydemo
等待即可,在等待的过程中,补充一些知识
webpack :为模板,这里只是最长用的一种模板
- 安装完之后结构如下
额外提示
- 在创建过程中,会提示你一系列是否下一步,请按照如下操作进行
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查js代码):n
Set up unit tests(安装单元测试工具):n
Setup e2e tests with Nightwatch(是否安装端到端测试工具):n
Should we run npm install for you after the project has been created? (recommended):回车。
- 文档结构解析
bulid
里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件。
config
配置文件,执行文件需要的配置信息。
src
资源文件,所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。
assets
资源文件夹,放图片之类的资源,
components
组件文件夹,写的所有组件都放在这个文件夹下,
router
路由文件夹,这个决定了页面的跳转规则,
App.vue
应用组件,所有自己写的组件,都是在这个组件之上运行了。
main.js
webpack入口文件。
本地部署
- 执行命令
npm run dev
- 打开浏览器,输入地址
http://127.0.0.1:8010 //输入你的地址
- 出现如下页面
恭喜你成功创建了一个简单的Vue界面。
添加Element UI插件
- 进入到你的工程文件夹内,打开git或者cmd
- 输入下方代码
npm i element-ui -S
- 然后在Main.js中添加以下信息
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
额外提示
- 项目目录下的/src/App.vue进行工程的开始,而不是index.html。
- 然后就可以使用Element UI的元素了。
最后
其他前端web插件
另一种创建方式
- 使用HbuilderX进行创建
步骤
- 下载Hbuilderx,无脑安装
- 然后文件-新建-项目
选择红线框的模板进行创建,然后等待创建就可以了,是不是很方便。 - 运行的时候点击
运行-运行到终端-npm rum dev
就可以了。
广告
- 我的公众号知享奇,有很多免费资源
- 我的论坛
知享奇,也有很多免费资源