vue开发：前端项目模板

简介

vue-cli创建vue项目，整合vuex、vue-router、axios、element-ui
项目模板下载地址

创建项目

Java+前端项目合集

npm install less
npm install less-loader@5.0.0

预期效果

访问根路径时重定向到欢迎页面
**点击侧边栏子节点时，路由自动发生改变，且跳转到不同的子组件

点击【书籍信息】，跳转到bookList.vue，向后端服务器发送axios请求，获取数据，遍历到页面

初始化项目

查看package.json中dependencies表示安装的运行依赖，devDependencies表示安装的开发依赖
plugins文件夹下的element.js表示element-ui插件配置成
删除router文件夹中index.js中默认生成的代码，同时删除views文件夹及子组件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({routes
})
export default router

store文件夹表示vuex配置成功，用于共享数据
删除根组件App.vue中默认生成的代码，同时删除components文件夹中的子组件

<template><div id="app">app根组件</div>
</template>
<script>
export default {name: 'app'
}
</script>
<style>
</style>

编写全局样式global.css，在main.js中导入
最后在终端中输入命令，启动项目，浏览器访问该项目，查看是否报错，

element-ui

element-ui使用步骤参考
使用element-ui布局

// 在当前项目element.js中已将所有element-ui组件全部引入了，直接使用即可
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

容器布局

<!-- 默认展开的子节点 -->
<el-menu :default-openeds="['1', '3']">
<!-- 默认选中的子节点 -->
<el-menu :default-active="['1-1']">
<!-- 图标 -->
<i class="el-icon-coin"></i>
<!-- 一级菜单-->
index="4"
<!-- 二级菜单 -->
index="5-1"
<!-- 三级菜单 -->
<el-menu-item index="4-1-2">
<!-- 默认选中颜色 -->
<el-menu active-text-color="#409EFF"<!-- 默认只展开一个子节点 -->
<el-menu unique-opened>

Router

路由使用步骤：1.构建项目时已经打开了router功能；2.新建子组件；3.router/index.js中配置路由规则；4.路由出口；5.main.js中router作为vue实例的属性
编写欢迎页面
- 访问根路径时，显示欢迎页面
- 新建一个welcome.vue
- router/index.js中引入子组件welcome.vue，配置路由规则
侧边栏开启路由

<!-- 1. App.vue中开启侧边栏路由 -->
<el-menu router><!-- 2. 子节点中设置path -->
<el-menu-item :index="'/userList'"><!-- 3. 新建子组件，如userList.vue等，并在router中配置路由规则 -->

axios

axios使用：main.js中引入axios，默认配置，注册为vue实例的属性
新建一个bookList.vue组件，发送axios请求，将返回的数据遍历到页面

<script>
export default {data() {return {books: []}},created(){// 将vue对象赋值给_thisconst _this = this;_this.$http.get("book/findAll/3/4").then(function(response){// then方法中的this表示responseconsole.log(response.data.content)_this.books = response.data.content;});}
}
</script>

vuex

使用步骤

// 1. 构建项目时已经打开了vuex功能// store/index.js
import Vuex from 'vuex'      // 2. 引入
Vue.use(Vuex)            // 3. 注册为vue实例的组件
export default new Vuex.Store({state: {count: 0      // 4. store中皴法共享数据},mutations: {},actions: {},modules: {}
})// 入口文件main.js
import store from './store'
new Vue({store,                 // 5. 将store挂载到vue实例render: h => h(App)
}).$mount('#app')// 在bookList.vue中使用
<span>vuex使用：{{ $store.state.count }}</span>

（文章转载自乐字节）

vue开发：前端项目模板相关推荐

如何用Vue开发前端和网站
如何用Vue开发前端和网站文章目录如何用Vue开发前端和网站安装安装vue脚手架创建Vue项目安装Elemenet-UI 在main.js上添加代码运行项目使用创建一个应用应用实例 ...
vue开发app项目，涉及原生接口调用，用hbuilder打包
使用vue开发app项目,怎么使用手机的原生功能,以获取手机的相册,调用摄像头为例. 这里使用的是hbuilder打包. 第一步: 定义一个vue组件,代码如下: <template>&l ...
在VS2010下利用vue开发团队项目
开发一个项目,采用什么语言都可以,主要能熟练高效的开发都是合理的,这次我们采用vue来开发一个团队项目.在开始之前掌握vue的基本用法,如双向数据绑定.组件和路由等,建议先去看之前的文档(webpac ...
Java 后端开发实践 - 项目模板（16 步）
在我的工作中,我从零开始搭建了不少软件项目,其中包含了基础代码框架和持续集成基础设施等,这些内容在敏捷开发中通常被称为"第0个迭代"要做的事情.但是,当项目运行了一段时间之后再来反 ...
Vue移动端项目模板
一个集成移动端开发插件的Vue移动端模板包含 1.css: 使用stylus开发css 集成reset样式文件修改UI组件文件统一样式处理(如主题色等) 2.UI组件使用热门的vant与min ...
React、Vue等前端项目彻底卸载ServiceWorker，亲测有效
前端项目遇到的问题每次前端项目在本地开发没事,一旦发布到线上就需要用户手动清理浏览器缓存,让用户总是吐槽,百度搜了很多文章都没找到解决方案,最终在钉钉源码中找到了解决方案.话不多说,直接上图: 1. ...
Java后端开发实践-项目模板
本文来源:http://r6d.cn/Jz79 整理出一套公共性的项目模板,旨在尽量多地包含日常开发所需,减少开发者的重复性工作以及提供一些最佳实践. 1. 从写好README开始一个好的READM ...
SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目
我们打开visual studio code , 选择文件------------->将文件夹添加到工作区,导入我们的项目安装Element 导入后,我们安装以下element 官网:http ...
Idea搭建VUE+elementUi前端项目
1.首先打开idea选择 javascript 2.项目web项目搭建成功 3.先输入vue in it webpack,路由之前全部回车,包括路由!路由之后全部选n回车!最后一个选npm就行了,就让 ...
为什么vue前端项目要使用nodejs
一.传统的JavaScript 传统的js是运行在浏览器上的,因为浏览器内核分为两个部分: 渲染引擎---渲染HTML和CSS, JavaScript 引擎---负责运行 JavaScript 随着技 ...

vue开发：前端项目模板

简介

创建项目

Java+前端项目合集

预期效果

初始化项目

element-ui

Router

axios

vuex

vue开发：前端项目模板相关推荐

最新文章

热门文章