vue样式初始化_前端Vue项目——初始化及导航栏

最新推荐文章于 2023-10-08 16:07:01 发布
最新推荐文章于 2023-10-08 16:07:01 发布
阅读量1k 收藏
点赞数
文章标签： vue样式初始化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39790760/article/details/111488023
版权
本文介绍了如何使用Vue CLI创建项目，并进行项目初始化，包括选择vue-router。接着详细讲述了如何结合ElementUI框架实现导航栏，包括ElementUI的安装、引入以及按需引入。同时，文章还展示了如何通过路由配置实现导航栏的路由跳转，以及如何设置路由的active样式。最后提到了从hash模式切换到history模式的必要性和后端配置要求。
摘要由CSDN通过智能技术生成

一、项目初始化

创建webpack模板项目如下所示：

MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project?Project name luffy_project?Project description A Vue.js project?Author hqs?Vue build standalone? Install vue-router?Yes? Use ESLint to lint your code?No?Set up unit tests No? Setup e2e tests with Nightwatch?No? Should we run `npm install` for you after the project has been created?(recommended) npm

vue-cli · Generated "luffy_project".

根据提示启动项目：

$ cd luffy_project/$ npm run dev

由于在初始化时选择了vue-router，因此会自动创建/src/router/index.js文件。

删除Helloworld组件相关信息后，index.js文件内容如下所示：

import Vue from 'vue'import Router from'vue-router'

//@绝对路径 检索到 ...src/

//如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中，可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

Vue.use(Router)//配置路由规则

export default newRouter({

routes: [

{

'path': '/'

}

]

})

二、基于ElementUI框架实现导航栏

1、elementUI——适合Vue的UI框架

elementUI是一个UI库，它不依赖于vue，但确是当前和vue配合做项目开发的一个比较好的UI框架。

(1)npm安装

推荐使用 npm 的方式安装，能更好地和 webpack 打包工具配合使用。

$ npm i element-ui -S

(2)CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

使用CND引入 Element 需要在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

2、引入 Element

在项目中可以引入整个Element，或者是根据需要仅引入部分组件。

(1)完整引入

在 main.js 中写入如下内容：

import Vue from 'vue'import App from'./App'import router from'./router'

//elementUI导入

import ElementUI from 'element-ui'import'element-ui/lib/theme-chalk/index.css' //注意样式文件需要单独引入//调用插件

Vue.use(ElementUI);

Vue.config.productionTip= false;/*eslint-disable no-new*/

newVue({

el:'#app',

router,

components: { App },

template:''});

以上代码便完成了 Element 的完整引入。

尝试在App.vue使用elementui的Button按钮：

信息按钮

name:'App'}

显示效果：

(2)按需引入

借助 babel-plugin-component，可以只引入需要的组件，以达到减小项目体积的目的。

首先安装babel-plugin-component：

$ npm install babel-plugin-component -D

然后将.babelrc文件修改如下：

{"presets": [["es2015", { "modules": false}]],"plugins": [

["component",

{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}

]

]

}

如果只希望引入部分组件，如Buttion何Select，那么需要在 main.js 中写如下内容：

import Vue from 'vue';

import { Button, Select } from'element-ui';

import App from'./App.vue';

Vue.component(Button.name, Button);

Vue.component(Select.name, Select);/*或写为

* Vue.use(Button)

* Vue.use(Select)*/

newVue({

el:'#app',

render: h=>h(App)

});

3、导航栏实现

首先创建/src/components/Common/LuffyHeader.vue文件：

登录

 |  注册

name:'LuffyHeader',

data(){return{}

},};

再创建/static/global/global.css文件：

*{padding:0;margin:0;

}body{font-size:14px;color:#4a4a4a;font-family:PingFangSC-Light; /*苹果设计的一款全新的中文系统字体，该字体支持苹果的动态字体调节技术*/

}ul{list-style:none;

}a{text-decoration:none;

}

在main.js中引入全局样式文件：

import Vue from 'vue'import App from'./App'import router from'./router'import ElementUI from'element-ui'import'element-ui/lib/theme-chalk/index.css' //样式需要单独引入

import '../static/global/global.css'import'../static/global/gt.js'

//调用插件

Vue.use(ElementUI);

Vue.config.productionTip= false

最后在App.vue中引入和使用组件：

name:'App',

components:{

LuffyHeader

}

}

显示效果如下所示：

三、导航栏路由跳转

1、组件创建和路由配置编写

添加“首页”、“免费课程”、“轻课”、“学位课”四大组件，因此创建如下文件：

src/components/Home/Home.vue

src/components/Course/Course.vue

src/components/LightCourse/LightCourse.vue

src/components/Micro/Micro.vue

在src/router/index.js中引入组件，配置路由规则：

import Vue from 'vue'import Router from'vue-router'

//@绝对路径 检索到 ...src/

//如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中，可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

import Home from '@/components/Home/Home'import Course from'@/components/Course/Course'import LightCourse from'@/components/LightCourse/LightCourse'import Micro from'@/components/Micro/Micro'Vue.use(Router)//配置路由规则

export default newRouter({

routes: [

{

path:'/',

redirect:'/home' //访问/，直接跳转到/home路径

},

{

path:'/home',

name:'Home',

component: Home

},

{

path:'/course',

name:'Course',

component: Course

},

{

path:'/home/light-course',

name:'LightCourse',

component: LightCourse

},

{

path:'/micro',

name:'Micro',

component: Micro

}

]

})

2、导航链接编写

修改 LuffyHeader.vue页面，编写导航链接：

登录

 |  注册

name:'LuffyHeader',

data() {return{

headerList: [

{id:'1', name: 'Home', title: '首页'},

{id:'2', name: 'Course', title: '免费课程'},

{id:'3', name: 'LightCourse', title: '轻课'},

{id:'4', name: 'Micro', title: '学位课程'}

],

isShow:false}

}

}

编写headerList列表及列表中的导航对象，在 导航栏中遍历对象获取对应信息，显示在页面效果如下所示：

3、router-link路由跳转

经过上面的编写，虽然导航栏已经可以正常显示，但是a标签是不会做自动跳转的。 需要使用 router-link 进一步改写LuffyHeader.vue，使得路由跳转得以渲染对应组件：

  • {{ list.title }}

登录

 |  注册

name:'LuffyHeader',

data() {return{

headerList: [

{id:'1', name: 'Home', title: '首页'},

{id:'2', name: 'Course', title: '免费课程'},

{id:'3', name: 'LightCourse', title: '轻课'},

{id:'4', name: 'Micro', title: '学位课程'}

],

isShow:false}

}

}

使用to='{name:list.name}'设置命令路由，这样点击a标签就可以跳转了。显示效果如下所示：

可以看到虽然点击了轻课，但是和其他导航项样式没有任何分别，需要设置路由active样式完成优化。

4、linkActiveClass设置路由的active样式

linkActiveClass 全局配置  的默认“激活 class 类名”。

active-class 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass来全局配置。

(1)在路由配置linkActiveClass

在 src/router/index.js 中做如下配置：

import Vue from 'vue'import Router from'vue-router'

//@绝对路径 检索到 ...src/

//如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中，可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

import Home from '@/components/Home/Home'import Course from'@/components/Course/Course'import LightCourse from'@/components/LightCourse/LightCourse'import Micro from'@/components/Micro/Micro'Vue.use(Router)//配置路由规则

export default newRouter({

linkActiveClass:'is-active',

routes: [

{

path:'/',

redirect:'/home' //访问/，直接跳转到/home路径

},

......

{

path:'/micro',

name:'Micro',

component: Micro

}

]

})

(2)在LuffyHeader.vue中配置路由active样式

......省略

color: #4a4a4a;

border-bottom: 4px solid #ffc210;

}

(3)显示效果

5、hash模式切换为 history 模式

vue-router 默认 hash 模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。比如http://www.abc.com/#/index，hash值为#/index。hash模式的特点在于hash出现在url中，但是不会被包括在HTTP请求中，对后端没有影响，不会重新加载页面。

如果不想要这种显示比较丑的hash，可以用路由的 history模式，这种模式充分利用 history.pushState API来完成URL跳转而无需重新加载页面。

(1)路由修改为history模式

修改 src/router/index.js 文件如下所示：

import Vue from 'vue'import Router from'vue-router'

//@绝对路径 检索到 ...src/

//如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中，可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

import Home from '@/components/Home/Home'import Course from'@/components/Course/Course'import LightCourse from'@/components/LightCourse/LightCourse'import Micro from'@/components/Micro/Micro'Vue.use(Router)//配置路由规则

export default newRouter({

linkActiveClass:'is-active',

mode:'history', //改为history模式

routes: [

{

path:'/',

redirect:'/home' //访问/，直接跳转到/home路径

},

.....

]

})

使用history模式时，url就像正常url，例如http://yoursite.com/user/id，这样比较美观。

显示效果如下所示：

(2)后端配置

但是要用好这种模式，需要后台配置支持。vue的应用是单页客户端应用，如果后台没有正确的配置，用户在浏览器访问http://yoursite.com/user/id 就会返回404，这样就不好了。

因此要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是app依赖的页面。

weixin_39790760
关注
vue样式初始化_VUE项目初始化
weixin_39806818的博客
12-18 772
Vue项目初始化：Vue项目请求生命周期和文件组件创建vue文件：user用户页面export default {name: "User",components: {Nav,Footer,},data(){return {}},methods: {}}1.入口文件：加载vue、router、store等配置 以及 加载自定义配置(自己的js、css，第三方的js、css)2.创建项目唯一根组件，渲...
vue样式初始化_前端Vue项目详解--初始化及导航栏
weixin_39859128的博客
12-18 215
一、项目初始化创建webpack模板项目如下所示：MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project? Project name luffy_project? Project description A Vue.js project? Author hqs? Vue build standalone? Install vu...
Vue——初始化样式
NanChen的博客
07-20 1359
代码】Vue——初始化样式。
Spring学习笔记4-配置文件
一片蓝蓝的云
10-02 187
一.前言 前面学习提到只讲到了xml文件配置，并未涉及到properties文件，其实xml文件和properties是同一种东西，只是表达形式不一样罢了，但一般情况下，xml文件用来添加改动的配置，properties文件用来配置不经常改变的配置，比如数据库等配置 二.xml文件 2.1 基础配置 xml文件的基础配置如下： <beans xmlns="http://www.springframework.org/schema/beans" <!--最基本的命名空间定义--&gt
vue样式初始化_Vue 中的样式绑定
weixin_30716641的博客
12-28 723
class的对象绑定在开发的过程中，难免会给dom元素添加一些样式，在 Vue 之中我们该如何绑定样式呢？现在有这样一个想法，div被点击一次，变成红色，当再次被点击时，恢复为默认的颜色， 再点击一次又变成红色，想实现这样的操作，如果凭借以前对 Vue 的了解，好像是没有办法实现的，因为我们很难想到数据如何和样式进行绑定，Vue 是面向数据的一种编程方式，它不在是直接操作dom的编程方式了，所以呢...
reset.css(添加了html字体大小50px和a标签下划线清除)
DaftJayee的博客
08-01 311
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, o..
【Vue】Vue 项目初始化
懂得一千零一种,赋予你失败的方法！
03-23 4070
文章目录一、删除 Helloword.vue二、删除 views 中的文件三、新建 homePage.vue四、修改路由文件五、清空默认根组件、项目样式 如图所示，是我们创建完 Vue 项目后跳转的视图，可以发现其中的内容与我们的项目相关性不大，所以一我们可以通过配置对其进行修改~ 一、删除 Helloword.vue 1.删除 src文件夹下的 cpmponents文件夹下的 Helloword.vue 文件 二、删除 views 中的文件 1、删除 view下的 AboutView.vue..
前端Vue项目详解–初始化及导航栏
12-02
Vue CLI提供了快速配置和初始化Vue项目的能力，通过回答一系列交互式问题，我们可以选择项目名称、描述、作者，以及是否添加vue-router、ESLint等特性。在选择了vue-router后，初始化过程会自动为项目生成一个基本的...
前端Vue项目详解--初始化及导航栏
10-16
文章主要介绍了如何使用Vue.js框架构建前端项目，并详细描述了项目的初始化过程以及如何使用Element UI组件库来实现项目中的导航栏部分。以下是对这些知识点的详细解释： 1. Vue.js项目初始化： Vue.js是一个构建...
前端Vue项目——初始化及导航栏
infotw的博客
06-24 9870
正文 一、项目初始化 　　创建webpack模板项目如下所示： MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone...
vue-impression-master.zip_FQI_impression_vue_laughpry_前端_前端框架
09-21
UI组件库是前端框架的另一个重要组成部分，Vue Impression 可能包含了一套预设的、符合现代设计标准的组件，如按钮、表格、模态框、导航栏等，这些组件遵循一致的设计原则，可以帮助开发者快速构建美观且功能丰富的...
Vue 初始化样式之 normalize.css
seimeii的博客
08-11 1655
Vue 初始化样式之 normalize.css
vue初始化及样式绑定
上上迁的专栏
11-26 449
文章目录前言关键字一、项目初始化建目录二、样式绑定 前言 行是知之始，知是行之成 关键字 v-bind 一、项目初始化 建目录 例如：D:\vuecode 进入目录输入回车 ``` code vue-demo-02 ``` **PS D:\vuecode\vue-demo-02> npm init -y** Wrote to D:\vuecode\vue-demo-02\package.json: { "name": "vue-demo-02", "version": "1.
vue初始化全局样式
haosicx的博客
02-14 585
normalize是CSS重置的现代替代方法 normalize.css 安装normalize.css yarn add normalize.css 使用normalize.css main.js 导入 normalize.css 即可。 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' + import .
Vue 初始化样式 normalize.css
最新发布
？
10-08 751
例如在某些浏览器中，特定的标签可能会带有一些奇怪的样式或者尺寸。使用normalize.css可以解决这些问题，使得网站的展示更加稳定和美观。：使用normalize.css可以大大提高开发效率，因为它消除了很多浏览器默认样式带来的问题，让开发者可以更专注于网站界面的设计和实现。：不同浏览器对于标签的默认样式存在差异，使用normalize.css可以让不同浏览器中的网页元素显示更加一致。：normalize.css是一个易于使用和定制的CSS文件，用户可以根据自己的需求轻松地进行适当的修改和扩展。
vue 初始化
qq_38674970的博客
07-16 870
安装node.js 傻瓜式  安装完毕看版本信息: node -v; 安装cnpm：  npm install -g cnpm --registry=http://registry.npm.taobao.org 安装vue-cil : cnpm install -g vue-cli  创建项目：vue init webpack firstVue  //firstVue 是名字 写名字啥的...
vue3初始化项目
weixin_49827467的博客
09-13 769
创建好项目，认识了项目目录，要开始做项目的前提，还是初始化项目： 初始化项目——设置别名 初始化项目——设置全局样式内容 初始化项目——封装网络请求 ** 1、设置别名alias ** @ is an alias to /src 新建一个 vue.config.js 文件： 在vue.config.js 文件中使用webpack 进行打包，设置别名，如下所示： module.exports = { configureWebpack:{ resolve:{
vue样式初始化_在vue中使用Normalize初始化样式
weixin_39823676的博客
12-28 587
安装使用Normalize首先安装normalize.css:npm i normalize.css --save-dev遇到的问题：import 'normalize.css'报错：原因没有安装：css-loader 和style-loadernpm install css-loader style-loader就解决了。在vue-cli中main.js中import 'normalize....
vue样式初始化_在vue中使用Normalize初始化样式详解
weixin_39571403的博客
12-18 1124
安装使用Normalize首先安装normalize.css:npm i normalize.css --save-dev或yarn add normalize.css//main.jsimport 'normalize.css'遇到的问题：import 'normalize.css'报错：原因没有安装：css-loader 和style-loader解决方案：npm install css-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值