vue前端框架搭建（如何搭建一个前端vue框架）

本篇文章给大家谈谈vue前端框架搭建，以及如何搭建一个前端vue框架对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享vue前端框架搭建的知识，其中也会对如何搭建一个前端vue框架进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、web前端开之网站搭建框架之vue详解
• 2、安装Vue创建前端项目
• 3、（一）基于 vue-element-admin 前端与后端框架搭建
• 4、vue项目创建和部署使用
• 5、5分钟看懂VUE项目

web前端开之网站搭建框架之vue详解

网站搭建框架之vue

Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。

对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。
引入vue.js的写法

Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入
，而v-html则会对标签进行编译，只显示标签内的内容。

至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。

V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。

V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。

除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中
通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。
（组件书写格式）
（组件整合）
（注册路由）

路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。

而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。

通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。

安装Vue创建前端项目

上一节安装了flask，我们现在需要安装vue前端框架，需要使用vue-cli方便安装和管理。

先要全局安装vue-cli，可以使用下列任一命令安装这个新的包：

你还可以用这个命令来检查其版本是否正确 (3.x)：

官方文档
已经安装最新版本的vue-cli，我很推荐这个图形化界面，非常方便。
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
图形化的界面就不需要多介绍了，有中文都能很好地使用。

使用Vue项目管理器，选择项目地址flask-vue根目录（上节运行flask示例的文件夹），创建新项目名称vue。根据具体需求选择创建条件完成项目创建，自动跳转至项目详情页。
下一节Flask与Vue的关联。

（一）基于 vue-element-admin 前端与后端框架搭建

通过 src/settings.js 进行全局配置vue前端框架搭建：

get-page-title.js 在 src/permission.js 中被引用

修改 package.json

执行命令启动
中间件是一个函数vue前端框架搭建，请求和响应周期中被顺序调用
写一个中间函数
调用中间件注意事项：

应用如何响应请求的一种规则

响应 / 路径的 get 请求

响应 / 路径的 post 请求

规则主要分两部分

通过自定义异常处理中间件处理请求中产生的异常

使用时需要注意两点：

浏览器输入 http://localhost:5000/user
安装 boom 依赖，最大的好处是可以快速的帮vue前端框架搭建我们生成一些异常信息

app.js

创建 router 文件夹，创建 router/index.js

创建 router/user.js

创建 router 文件夹，创建 router/constant.js

启动，访问根路径 http://localhost:5000
这里指定的路由的前缀 /user 所有访问路径前要加 /user
访问 http://localhost:5000/user/info
访问一个不存在的路径

自定义路由异常处理中间件
注意两点:

访问一个不存在的路径时，会返回一个 json 的结果，方便前端做出处理

vue项目创建和部署使用

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架 vue ，作为一个基础的了解。 vue 的作者是国人尤雨溪。官网描述 vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：

基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没有nodeJs环境，所以直接从环境搭建开始。

配置淘宝源，注意 -g 是全局安装

完成之后将使用 cnpm 替换 npm ，验证 cnpm :

之后的依赖安装就可以使用 cnpm install <package 或简写 cnpm i <package 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用 -g -D --save 等参数设置安装范围。

安装 vue-cli
vue-cli 是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。
安装命令

验证安装

之后我们看到一个 hello-world 的文件夹，里边包括默认生成的一些配置和 App.vue , main.js 等程序文件，如下是支持 vue-router 路由 （控制页面切换等操作） 的一个 main.js 具体内容

注意使用路由时，不要忘记在主模板里添加 <router-view</router-view 标签，表示路由切换的位置，否则路由页面无法正常展示。

先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行

之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。

既然提到了部署，默认的部署使用 npm/cnpm 进行，如下命令，输出内容在 /dist 目录。

可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。

启动 vue-cli 图形界面

然后按照提示访问即可。

以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托 vue 提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。

1. Vue.js介绍
2. Vue CLi脚手架

5分钟看懂VUE项目

VUE是前端开发框架。诞生于2014年吧。

原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。

后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。

使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。

VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。

但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。

前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。

刚建立好的项目一定是下面这种目录结构（ranktable.vue是我后加的

这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。

学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。

index.html-main.js-App.vue-index.js-HelloWorld.vue

我将这几个文件大概讲一讲，你就能有个清晰的脉络了。

一、index.html

<!DOCTYPE html

<html

<head

<meta charset="utf-8"

<meta name="viewport" content="width=device-width,initial-scale=1.0"

<titletradedatapy</title

</head

<body

<div id="app"</div

</body

</html

页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是<body里面过于简单。<div id="app"</div表示本html绑定了一个id为app的VUE对象。

二、main.js

new Vue({ //new Vue语句就是定义了一个VUE对象

el: '#app', //vue对象的id是app

router,

components: { App }, //vue的组件名是APP

template: '<App/' //template 名是APP

})

这就定义了一个app的VUE对象，index.html就可以找到它了。
三、App.vue

<template

<div id="app"

<router-view/

</div

</template

<script

export default {

name: 'App' //export 了名为App的组件，main.js就可以找到它了

}

</script

上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。<img src="./assets/logo.png"这句被我注释了，否则页面会显示这个图片的。下面的<route-view/部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。

四、index.js

项目里有不只一个index.js，一定看准了，我要讲解的是router目录下的index.js.

//这里的配置决定了App.vue里<router-view/位置会展示什么内容

export default new Router({

routes: [

{

path: '/', //当用户访问 http://localhost:8080/ 根目录也就是默认目录会被路由到HelloWorld组件，

//这个组件的所有内容会被在App.vue里<router-view/显示出来

name: 'HelloWorld',

component: HelloWorld

},

{//当用户访问 http://localhost:8080/ranktable 会显示ranktable.vue内容

//ranktable.vue是我后加的

path: '/ranktable',

name: '/ranktable',

component: ranktable

}

]

})

五、HelloWorld.vue

最后看看这里有什么

<template

<div

原来的内容被我删除了，现在页面显示这句话。

</div

</template

<script

</script

vscode命令行执行npm run dev，看见下面说明成功了，将地址贴进浏览器

Compiled successfully in 983ms 15:43:26

I Your application is running here: http://localhost:8080

如果想要更复杂的功能，在helloworld.vue实现就行了，比如我要一个填表查询功能，里面改成

<template

<div

<group title="城市"

<selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"</selector

</group

<group title="街道"

<selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"</selector

</group

<group title="小区"

<selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"</selector

</group

<group title="日期"

<selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"</selector

</group

<group title="统计类型"

<selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"</selector

</group

<div style="padding:15px;"

<x-button type="primary" @click.native="getValue('plainValueRef')"查询</x-button

</div

</div

</template

<script

import { Selector, Group, Cell, CellBox, XButton } from 'vux'

此处省略很多东西

</script

这个例子有点复杂，需要下面<script里实现很多内容，引入vux的一些组件，vux大家可以自行研究。效果是这样的 关于vue前端框架搭建和如何搭建一个前端vue框架的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue前端框架搭建的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于如何搭建一个前端vue框架、vue前端框架搭建的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。