vue项目搭建
一、项目开发为什么要使用 vue?
(1)vue 的简介
Vue.js 是一套构建用户界面的渐进式框架
,Vue 采用自下向上增量开发的设计,其核心库只关注视图层,易于上手
。在传统 web 开发中,我们搭建项目都以 html 结构为基础,然后通过 jquery 或者 js 来添加各种特效功能,需要去选中每一个元素进行命令,这些内容在简单的项目中或者不变的项目中还能应付得来,一旦项目改动或者项目工程较大,代码的修改将是复杂繁琐的,而这时候用了 vue,这些问题都不复存在。
(2)vue 的优势有哪些?
1、 数据绑定:vue会根据对应的元素,进行设置元素数据,通过输入框,以及get获取数据等多种方式进行数据的实时绑定,进行网页及应用的数据渲染 。
2、 组件式开发:通过vue的模块封装,它可以将一个web开发中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发。
二、如何使用 vue 开发一个后台管理系统?
基于 vue + element-ui
开发,可借用 vue-element-admin
框架搭建的基本结构。
后续有机会的话会写一写vue开发后台管理系统的小demo。
三、如何使用 vue 开发一个移动端项目?
(1)安装脚手架
cnpm i @vue/cli -g
vue create myapp / vue ui
cnpm i @vue/cli-init -g / cnpm i vue-cli -g
vue init webpack myapp
(2)创建项目
vue create myapp
cd myapp
cnpm run serve
(3)设置项目的基本结构
src
* api
* assets
* components
* lib
* mock
* store
* views
App.vue
main.js
registerServiceWorker.js
router.js
store.js
(4)创建页面基本结构
需要添加 样式库 scss
- App.vue
<div id="app">
<div class="container">
<header class="header"></header>
<div class="content"></div>
</div>
<footer class="footer"></footer>
</div>
(5)创建各个页面
home kind cart user detail
(6)设定路由
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
components: {
default: () => import('@/views/home/index.vue'),
footer: Footer
}
},
{
path: '/kind',
name: 'kind',
components: {
default: () => import('@/views/kind/index.vue'),
footer: Footer
}
},
{
path: '/cart',
name: 'cart',
components: {
default: () => import('@/views/cart/index.vue'),
footer: Footer
}
},
{
path: '/user',
name: 'user',
components: {
default: () => import('@/views/user/index.vue'),
footer: Footer
}
}
]
App.vue
<template>
<div id="app">
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
</template>
components/Footer.vue
<template>
<footer class="footer">
<ul>
<router-link to="/home" tag="li">
<span class = "iconfont icon-shouye"></span>
<p>首页</p>
</router-link>
<router-link to="/kind" tag="li">
<span class = "iconfont icon-tubiao113"></span>
<p>分类</p>
</router-link>
<router-link to="/cart" tag="li">
<span class = "iconfont icon-gouwuche"></span>
<p>购物车</p>
</router-link>
<router-link to="/user" tag="li">
<span class = "iconfont icon-weibiaoti2fuzhi12"></span>
<p>我的</p>
</router-link>
</ul>
</footer>
</template>
到此,基本的框架已经搭好了,各个页面的跳转就已经可以实现了,剩下的就是往各个页面添加元素了。 后续有时间会继续完善,继续更新