首页>>后端>>SpringBoot->vue制作一个简单的网站(vue搭建个人网站)

vue制作一个简单的网站(vue搭建个人网站)

时间:2023-12-05 本站 点击:0

准备用vue写个小项目,使用axios调用api做一个网站,还需要哪些技术?

看你自己的需要咯,

比如前端的跟vue搭配一起的,有vue-router(路由,这个铅笑就不解释了), vuex (全局变量,也不详细盯激迟解释了)。可能还有框架?比如element-ui,或者vuetify这样的。

后端的话如果用node的就有express,koa这样凯李的。而后端的,可能还涉及到一些数据的存储之类的,又会涉及到一个数据库的插件,比如ORM,NEDB这样的。

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结合,毕竟每个工具都有其优点,择其优而用是明智的选择。

Primary:Vue{三、一个基于Vue的门户网站(经验踩坑)}

使用框架时必须熟知框架指令特性!很重要;

Bootstrap+jQuery是很好的选择!

库:          1.i18n(双语言切换);

                  2.vue-router(路由);

                  3.vuex(状态管理,需要进行双语言切换监听变化);

                  4.ElementUI(饿了么以电脑端为主得UI框架);

                  5.sass(css预处理);

                  6.echarts(需要K线图,个人推荐不要用echarts,太大);

                  7.axios(相对于fetch兼容性好,请求数据)

IE的坑:1.走马灯之前用的是swiper的,结果兼容性不好,4.0+兼容不好,3.0主要以移动端为主,

                之后换成了ElementUI的走马灯又引导出无法覆盖ElementUI的样式,因为VUE是默认全局覆盖局部,再加一个style,不要加scoped,ElementUI是全局引入!  解决问题。

                2.经验不足,IE9不支持flex,坑、坑、坑移动端写习惯了!

                3.多行文本省略只升游支持webkit内核浏览器,又是坑,用js控制长度吵祥销搞定!

                4.低版本兼容引入babel-polyfill,将build webpack.base.conf.js里entry修改为entry: {'babel-polyfill': 'babel-polyfill',app: './src/main.js'},

            5.使用axios低版本兼容 es6-promise包,在main.js里引用

                import promise from 'es6-promise'

       宴胡         promise.polyfill()

打包:1.history模式:需要服务器端配置请看官网;不需要改任何东西,路由里加mode:history即可

           2.hash模式:将config里index.js里的 assetsPublicPath: '/'   改为assetsPublicPath: './',即可访问静态资源;

           3.打包体积:将config里index.js里的productionSourceMap: true, 改为 productionSourceMap: false,或者待打包完之后手动删除Map文件;

            4.路由懒加载(具体看官网很简单);

            5.第三方包分离将build webpack.base.conf.js里添加

                    externals:{;

                        'echarts':"echarts"

                      },

            6.打包后css背景图无法访问,将build   utils.js里添加  publicPath: '../../',

        7.sass配置(webpack.base.conf.js)

    { test: /\.scss$/, loaders: ["style", "css", "sass"]},

如有写错的地方欢迎大家评论

VuePress-Vue驱动的静态网站生成器入门教程

VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

事实上,一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,你甚至可以使用 Vue DevTools 去调猜指试你的自定义主题。

在构建时,我们会为应用创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。这种做败兆雀法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令,以及其他的一些项目,比如 Gatsby

1、创建并进入一个新目录

2、使用你喜欢的包管理器进行初始化

3、将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

4、创建你的第一篇文档

5、在 package.json 中添加一些 scripts

这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。

6、在本地启动服务器

VuePress 会在 (opens new window)启动一个热重载的开发服务器。

现在,你应该已经有了一个简单可用的 VuePress 文档。接下来,了解一下推荐的 目录结构 和 VuePress 中的 基本配置。

VuePress 遵循 “约定优于配置” 的原则,推荐的目录结构如下:

如果没有任何配置,这个网站将会是非常局限的,用户也无法在你的网站上自由导航。为了更好地自定义你的网站,让我们首先在你的文档目录下创建一个 .vuepress 目录,所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样:

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:

对于上述的配置,如果你运行起 dev server,你应该能看到一个页面,它包含一个页头,里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。

你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的察早配置文件。

一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中,目前自带了一个默认的主题(正是你现在所看到的),它是为技术文档而设计的。同时,默认主题提供了一些选项,让你可以去自定义导航栏(navbar)、 侧边栏(sidebar)和 首页(homepage) 等,

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/SpringBoot/12779.html