![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
艾艾猫dori
这个作者很懒,什么都没留下…
展开
-
vuex小型项目(包含登录,身份权限,购买会员身份转变功能)
1.新建包pages、router2.pages新建页面.index.vue login.vue3.router新建页面index.js4.index.vue login.vue增加内容5.编写index.js6.App.vue增加router-view标签,删除其他内容7.main.js引入router并注册8.完毕,npm run serve可出初级页面效果9.新建包store,包里新建index.js10.新建state.js,export default11...原创 2020-08-17 17:50:57 · 236 阅读 · 0 评论 -
vue项目豆瓣移动端
vue create doubandemocnpm install axios --savecnpm install vue-axios --savecnpm install vue-router --savecnpm install mint-ui --save原创 2020-07-07 09:08:19 · 736 阅读 · 7 评论 -
vue指令v-bind&v-on
v-bindv-bind使用:给元素的属性赋值简写形式:属性名=“变量名”<div v-bind:原属性名="变量"></div><div :属性名="变量">v-onv-on的使用:处理自定义原生事件的,给按钮添加click并让使用变量的样式改变普通使用 v-on:事件名="表达式||函数名"简写方式 @事件名="表达式"...原创 2020-07-05 11:31:31 · 107 阅读 · 0 评论 -
vue-router 跳转之router.push()
router.push(location)除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)。声明式:<router-link :to=".原创 2020-07-02 10:31:59 · 640 阅读 · 0 评论 -
vue项目中element-ui全局引入&按需引入&按需引入报错解决
全局引入1.安装element-uicnpm install element-ui --save 2.main.js引入elementUIimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.App.vue删掉原始内容,添加如下内容:4.浏览器查看效果出现一个Button按钮,点击按钮,会有弹出框。成功。按需引入1.安装babel组原创 2020-06-28 10:29:28 · 3517 阅读 · 0 评论 -
vue中使用mintUI完整/按需引入& router-link报错解决
1.新建项目vue create mintuidemo12.安装mintUIcnpm install mint-ui --save3.main.js引入mintUI和cssimport Mint from 'mini-ui'import 'mint-ui/lib/style.css'Vue.use(Mint)原创 2020-06-22 23:08:43 · 559 阅读 · 0 评论 -
vuex搭建过程以及项目结构
概念vuex是专为vue.js应用程序开发的状态管理模式(提供了可共用的参数),主要采用的是集中式存储管理应用的所有组件状态(响应式)主要应用场景多个视图依赖于同一状态来自不同视图的行为需要变更同一状态vuex核心概念state:数据仓库,驱动应用的数据源。mutations:提供修改数据仓库的方法。(同步的)getters:提供获取仓库内容的方法。actions:提供了异步操作,基于mutations来进行操作。项目操作1.如果要在项目中使用vuex的话,在当前目录下安装vuex:原创 2020-06-19 14:57:56 · 255 阅读 · 0 评论 -
认识vuex&vuex基础项目构建
认识vuexvue介绍vue核心概念构建项目1.进入项目文件夹下,创建项目vuexdemo1vue create vuexdemo12.进入项目,安装vuexcd vuexdemo1/cnpm install vuex --save3.在Hbuilder打开该项目目录,打开main.js,并编辑如下内容:4.在App.vue中获取count5.效果:对应main.js中的count:06.升级为计算属性computed7.使用vuex来写,在main.js中定原创 2020-06-17 10:34:00 · 140 阅读 · 0 评论 -
vue脚手架项目搭建完整流程&vue引入bootstrap
vue脚手架搭建过程1.检查vue -V判断当前设备是否有vue环境,如果没有就执行cnpm install -g @vue/cli2.再次检查vue -V看是否创建成功3.创建vue项目的途径有vue ui(vue自己的图像界面化的工具),第二个是vue create 【项目名】4.在使用命令创建时会问你一些问题,一路回车默认创建即可5.创建完成后,会提示你进入相应的项目目录,执行npm run serve启动项目,等待启动完成后,你就可以看到vue的logo了。此时代表项目创建成功了。6原创 2020-06-17 08:44:21 · 1283 阅读 · 0 评论 -
vue-router路由(概念、作用、安装、示例)
一、 vue-router概念:这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(single page application单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应原创 2020-06-11 18:00:03 · 36281 阅读 · 5 评论 -
vue cli脚手架创建项目的2种方式
环境:Mac工具:Hbuilder通过命令创建项目1.创建项目打开终端,进入你要放项目的文件夹,vue -V检查是否有脚手架vue cli,然后进行创建:vue create 项目名。2.选择默认创建3.完毕后,会出现提示命令。按照提示命令依次执行。4.完毕后,选择网址在浏览器打开并出现如下界面5.到编辑软件,文件–打开目录–刚才的创建的项目名。即可使用啦。6.如过control c停掉了刚才第4步终端的项目进程到编辑软件界面,选择工具–外部命令–npm run serve,原创 2020-06-08 10:40:52 · 550 阅读 · 0 评论