vue

首先查看npm版本 npm 是node的命令 没有的先安装node 然后执行 npm install -g vue-cli 　　如果执行这句命令有问题，则需要将npm的仓库地址改为淘宝镜像 　　　　npm install -g cnpm --registry= https://registry.npm.taobao.org 　　　　然后再用cnpm安装vue-cli。 　　　　cnpm i -g vue-cli 创建 vue项目 　　vue init webpack <项目名称> 　　后面根据提示选择或输入对应的字符串 　　进入项目目录之后 执行npm run dev vue就运行起来了 注意： 如果改变了npm的仓库地址仓库地址 则后面的 npm install 要改为 cnpm install 去安装vue的依赖 　　　　将启动命令 npm run dev 改为 cnpm run dev 　　 来源： https://www.cnblogs.com/brucexl/p/11020438.html

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。 1）首先在github下载devtools源码，地址： https://github.com/vuejs/vue-devtools。 2）下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。 3）编译完成后，目录结构如下： 修改shells、chrome目录下的mainifest.json 中的persistant为true： 4）打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式 然后将刚刚编译后的工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。 5）打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式： 发现vue.js is not detected ，可以调整一下webpack.config.js的代码， 最后，重启一下你的vue项目应该就可以使用了。 转载自： https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google

vue.js项目，每隔5秒请求一次接口，接口有返回则停止请求，没有返回继续请求。 先看两种定时器 // 每隔设定时间调用一次函数 setInterval ( function ( ) { } , milliseconds ) //设定时间后只执行函数一次 setTimeout ( function ( ) { } , milliseconds ) 注意：单纯的使用setInterval会导致页面卡死！ 由于setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。 但是setTimeout是自带清除定时器的，因此正确解决方法如下： window . setInterval ( ( ) => { setTimeout ( fun , 0 ) } , 30000 ) setInterval必须放在外层，内层配合setTimeout，便可以无限次调用接口 回到要解决的问题，如何在得到数据后停止定时器？ // 如methods里定义的点击方法 methods : { click ( ) { let timer = setInterval ( ( ) => { this . fun ( timer ) } , 5000 ) } , fun ( timer ) { setTimeout ( ( ) => { // 这里ajax 请求的代码片段和判断是否停止定时器

项目部署 (vue + nginx + uwsgi + django + mysql + redis) 一 . 前端部署 　　1. 下载vue代码,解压缩 wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip # zip格式的用unzip解压 unzip 07-luffy_project_01.zip 　　2. 配置node环境,去打包编译vue代码 # 下载node的代码包 wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz # 解压缩node代码包 tar -zxvf node-v8.6.0-linux-x64.tar.gz # 配置node环境,找到bin的路径添加到PATH里,然后source /etc/profile 　　3. 验证node是否正确配置(node就如同python的解释器, npm就是如同pip管理工具软件包 node -v npm -v 　　4.修改vue的代码文件 因为vue需要向后台发起请求,找到uwsgi # 我们的架构是将uwsgi隐藏在nginx后面 !!!所有 vue(端口80)首先找的是nginx(反向代理,端口是9000),然后nginx(反向代理

export function request(config) { // 1)创建axios的实例 const baseURL='/api' //接口的基本路径 const instance=axios.create({ baseURL:baseURL, timeOut:5000, }) //2.1)axios 的请求拦截器interceptor.request instance.interceptors.request.use(config=>{ //在请求拦截器可以做以下操作 // 1）config中的信息不符合服务器要求 // 2)每次发送请求时，在界面显示一个图标 show出来（在成功响应的拦截器中隐藏） // 3）某些网络请求（比如登录（token）），必须携带一些特殊信息{判断路径，看是否有token} return config;//最后必须做的一步 },err=>{ }) //2.2axios 的 响应拦截interceptors.response instance.interceptors.response.use(res=>{ return res },err=>{}) //3)发送网络请求 return instance(config)//方法返回一个promise，通过.then拿到结果 } 来源： CSDN 作者： weixin_46337813 链接：

组件数据传递： 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入，通过设置标签的属性传递数据，在子组件用 props接受，，例如下面这样，父组件parent.vue引入子组件child.vue，将父组件的数据name通过设置标签child的name属性传递给子组件，子组件通过props传递接受，接受后，在子组件内this.name就是父组件的name数据。 父组件： <template> <div> <child :name="name"></child> </div> </template> <script> import child from "./child" export default { name: "list", components: {child}, data(){ return { name:"hello", } } } </script> <style scoped> </style> 子组件： <template> <div>{{name}}</div> </template> <script> export default { name: "edit", props: { name :String } } </script> <style

文章目录 5.指令学习 5.7.计算属性 5.8.watch 6.组件化 6.1.全局组件 6.2.组件的复用 6.3.局部组件 6.4.组件通信 6.4.1.props（父向子传递） 6.4.2.props验证 6.4.3.动态静态传递 6.4.4.子向父的通信：$emit 7.路由vue-router 7.1.场景模拟 7.1.1.编写父组件 7.1.2.编写登录及注册组件 7.1.3.在父组件中引用 7.1.5.问题 7.2.vue-router简介和安装 7.3.快速入门 5.指令学习 5.7.计算属性 在插值表达式中使用js表达式是非常方便的，而且也经常被用到。 但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值： data : { birthday : 1529032123201 // 毫秒值 } 我们在页面渲染，希望得到yyyy-MM-dd的样式： < h1 > 您的生日是：{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }} </ h1 > 虽然能得到结果，但是非常麻烦。 Vue中提供了计算属性，来替代复杂的表达式： var vm

前言 （此项目基于vue-cli跟layuot布局，不过后台系统基本都是这么布局的吧） 现有一个需求，要求把现有管理后台修改为可以根据不同用户呈现出不同的菜单栏（其实就是路由）就如下图 思路 1：先定义基本路由，然后使用router.addRoutes()动态添加相关路由 2：将用户的路由信息存储到localStorage 3：使用router.matcher重置路由 代码 router.js文件：定义基本路由，创建初始路由跟定义重置路由函数 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); // 定义基本路由 export let routes = [ { path: '/login', name: 'login', component: () => import('@/views/Login.vue') }, { path: '*', name: 'notFound', component: () => import('@/views/404.vue') } ]; const createRouter = () => { return new Router({ routes: routes }); }; //创建路由 let router = createRouter(); /

首先 用 Visual studio code 打开创建好的 vue 文件夹 在 src 下创建 vue 的 demo( 这里以 home.vue 跟 about.vue 做样式 ) 注意 : 一定要放在 src 目录下 这里是 home.vue < template > < div > < h1 > home </ h1 > < p > {{ msg }} </ p > </ div > </ template > < script > export default { data () { return { msg: " 我是 home 组件 " } } } </ script > 这里是 about.vue < template > < div > < h1 > about </ h1 > < p > {{ aboutMsg }} </ p > </ div > </ template > < script > export default { data () { return { aboutMsg: ' 我是 about 组件 ' } } } </ script > 2. 在 App.vue 里面放入下面的 router 组件 < template > < div id = "app" > < img src = "./assets/logo.png" > < header

vue的八个生命周期函数 下面的这八个函数都是vue的基本函数，基本对象，和data，methods这些对象都是并列的，在进行vue实例的时候，有需要再实例化 beforeCreate () 这个是在刚刚创建vue对象的时候被调用的函数，在调用这个函数的时候，vue对象内的所有对象都没有被创建 created () vue对象被创建之后，data里面的数据被加载到内存中，但是还没有被加载到浏览器中，这时候初始化的是一些data对象里面的一些元素。 beforeMount () 在数据被加载到浏览器之前执行的函数，如果要是有一些想要要初始化的数据，都可以放在这里面来操作 mounted () vue对象中的数据已经都被加载进来了， beforeUpdate () 在被绑定的元素发生变化之前执行的， updated () 被绑定的元素更新之后执行的事件 beforeDestroy () vue对象被销毁，执行的函数，一般用不到 destroyed () vue对象销毁之后调用的函数，一般不会使用 下面这张图是vue官网上的 来源： CSDN 作者： LSKYHJ 链接： https://blog.csdn.net/weixin_43675915/article/details/104629994