Uninote
Uninote
用户根目录
每日点滴

<!DOCTYPE html> <html><head><meta http-equiv='Content-Type' content='text/html; charset=utf8'><title>mynote-front</title> <script> var g_resRoot = '../../__res/'; var g_json_outline = '{"children":[{"children":[],"level":1,"lvNumber":"1","text":"mynote-front jy"},{"children":[{"children":[],"level":2,"lvNumber":"2.1","text":"default.vue"}],"level":1,"lvNumber":"2","text":"layout"},{"children":[],"level":1,"lvNumber":"3","text":"auth.js"},{"children":[],"level":1,"lvNumber":"4","text":"_pageNo.vue"},{"children":[],"level":1,"lvNumber":"5","text":"index.vue"},{"children":[],"level":1,"lvNumber":"6","text":"router"},{"children":[],"level":1,"lvNumber":"7","text":"mapState"},{"children":[{"children":[],"level":2,"lvNumber":"8.1","text":"linux 脚本 汇总"},{"children":[],"level":2,"lvNumber":"8.2","text":"windows"},{"children":[],"level":2,"lvNumber":"8.3","text":"mynote front servers"}],"level":1,"lvNumber":"8","text":"mynote front 部署"},{"children":[],"level":1,"lvNumber":"9","text":"图片等比例缩放 scaleImg"},{"children":[],"level":1,"lvNumber":"10","text":"mynote-front my config"},{"children":[],"level":1,"lvNumber":"11","text":"mynote front design"},{"children":[{"children":[],"level":2,"lvNumber":"12.1","text":"element-ui 主题"}],"level":1,"lvNumber":"12","text":"mynote front element-ui"},{"children":[{"children":[{"children":[],"level":3,"lvNumber":"13.1.1","text":"ssr时"},{"children":[],"level":3,"lvNumber":"13.1.2","text":"非ssr时"}],"level":2,"lvNumber":"13.1","text":"到后台服务器的网络请求监控"}],"level":1,"lvNumber":"13","text":"mynote front kbp"},{"children":[{"children":[],"level":2,"lvNumber":"14.1","text":"填坑记录"}],"level":1,"lvNumber":"14","text":"mynote front ssr"}],"level":0,"lvNumber":"","text":"mynote-front"}'; </script> <link rel='stylesheet' type='text/css' href='../../__res/common.css'><style>.s0{color:#000000;} .s1{color:#000000;} .s2{color:#808080;} .s3{color:#808080;} .s4{color:#7a7a43;} .s5{color:#000000;} .s6{color:#000080;} .s7{color:#660e7a;} .s8{color:#008000;} .s9{color:#000000;} .s10{color:#000080;} .s11{color:#0000ff;} .s12{color:#008000;} .s13{color:#660e7a;} .s14{color:#c80000;} .s15{color:#000000;} .s16{color:#7a7a43;} .s17{color:#c80000;} .s18{color:#458383;} .s19{color:#0000ff;} .s20{color:#0000ff;} .s21{color:#000000;} .s22{color:#c80000;} .s23{color:#0080ff;} .s24{color:#0080ff;} .s25{color:#000000;} .s26{color:#c80000;} .s27{color:#000000;} .s28{color:#000000;} .s29{color:#000000;} .s30{color:#0000ff;} </style> </head><body> <script src='../../__res/util.js'></script><div id='outline'> <li><a href='#ol_0' style='font-weight:bold; font-size:22px'>mynote-front</a></li> <li> <a href='#ol_1' >mynote-front jy</a></li> <li> <a href='#ol_2' >layout</a></li> <li> <a href='#ol_3' >default.vue</a></li> <li> <a href='#ol_4' >auth.js</a></li> <li> <a href='#ol_5' >_pageNo.vue</a></li> <li> <a href='#ol_6' >index.vue</a></li> <li> <a href='#ol_7' >router</a></li> <li> <a href='#ol_8' >mapState</a></li> <li> <a href='#ol_9' >mynote front 部署</a></li> <li> <a href='#ol_10' >linux 脚本 汇总</a></li> <li> <a href='#ol_11' >windows</a></li> <li> <a href='#ol_12' >mynote front servers</a></li> <li> <a href='#ol_13' >图片等比例缩放 scaleImg</a></li> <li> <a href='#ol_14' >mynote-front my config</a></li> <li> <a href='#ol_15' >mynote front design</a></li> <li> <a href='#ol_16' >mynote front element-ui</a></li> <li> <a href='#ol_17' >element-ui 主题</a></li> <li> <a href='#ol_18' >mynote front kbp</a></li> <li> <a href='#ol_19' >到后台服务器的网络请求监控</a></li> <li> <a href='#ol_20' >ssr时</a></li> <li> <a href='#ol_21' >非ssr时</a></li> <li> <a href='#ol_22' >mynote front ssr</a></li> <li> <a href='#ol_23' >填坑记录</a></li> </div>

<pre id='ol_0' class='title'>mynote-front</pre> <pre><d class='s0'></d></pre> <pre><d class='s0'><a href='https://zh.nuxtjs.org/guide/routing'>https://zh.nuxtjs.org/guide/routing</a></d></pre> <pre><d class='s0'><a href='https://cn.vuejs.org/v2/api/#v-bind'>https://cn.vuejs.org/v2/api/#v-bind</a></d></pre> <pre><d class='s0'><a href='https://vuex.vuejs.org/zh/guide/modules.html'>https://vuex.vuejs.org/zh/guide/modules.html</a></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>offcanvas-bar 响应式时的用户目录</d></pre> <pre><d class='s0'></d></pre> <h1 id='ol_1'>mynote-front jy</h1> <pre><d class='s1'></d></pre> <pre><d class='s0'><a href='https://github.com/shhdgit/vue-easy-slider'>https://github.com/shhdgit/vue-easy-slider</a></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>nuxt.config.my.js</d></pre> <pre><d class='s0'>gogs 修改密码错误:先确认 gogs_token 是否配置正确</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s2'>/</d></pre> <pre><d class='s3'> * 显示上传图片弹框</d></pre> <pre><d class='s3'> */</d></pre> <pre><d class='s4'>showUploadDialog</d><d class='s5'>() {</d></pre> <pre><d class='s5'> </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>editor</d><d class='s5'>.</d><d class='s4'>executePlugin</d><d class='s5'>(</d><d class='s8'>"imageDialog"</d><d class='s5'>, </d><d class='s8'>"image-dialog/image-dialog"</d><d class='s5'>);</d></pre> <pre><d class='s5'>},</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>必须要有main:</d></pre> <pre><d class='s9'><</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>main </d><d class='s11'>class=</d><d class='s12'>"content-container" </d><d class='s11'>ref=</d><d class='s12'>"</d><d class='s13'>container</d><d class='s12'>"</d><d class='s9'>></d></pre> <pre><d class='s9'> 123</d></pre> <pre><d class='s9'> </</d><d class='s10'>main</d><d class='s9'>></d></pre> <pre><d class='s9'></</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s9'></d></pre> <pre><d class='s9'><</d><d class='s10'>script</d><d class='s9'>></d></pre> <pre><d class='s9'></</d><d class='s10'>script</d><d class='s9'>></d><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>这样也可以:register.vue</d></pre> <pre><d class='s9'><</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>div </d><d class='s11'>class=</d><d class='s12'>"main"</d><d class='s9'>></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>hover 要这样:</d></pre> <pre><d class='s9'>.</d><d class='s10'>default-button</d></pre> <pre><d class='s10'> </d><d class='s11'>width 100</d><d class='s9'>%</d></pre> <pre><d class='s14'> &:hover,&:active</d><d class='s10'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>dd-item 要放里面,否则会被默认的覆盖</d></pre> <pre><d class='s9'><</d><d class='s10'>el-dropdown-item </d><d class='s11'>class=</d><d class='s12'>"</d><d class='s8'>dd</d><d class='s12'>-item"</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>nuxt-link </d><d class='s11'>to=</d><d class='s12'>"/user/setting" </d><d class='s11'>class=</d><d class='s12'>"</d><d class='s8'>dd</d><d class='s12'>-item"</d><d class='s5'>>用户中心</</d><d class='s6'>nuxt-link</d><d class='s5'>></d></pre> <pre><d class='s5'></</d><d class='s6'>el-dropdown-item</d><d class='s5'>></d><d class='s12'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>便于区分:</d><d class='s10'>dd-menu</d><d class='s6'> </d><d class='s10'>dd-</d><d class='s6'>item</d><d class='s10'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>E:\uninote\mynote-front\assets\stylus\header.styl</d></pre> <pre><d class='s10'>@import </d><d class='s12'>'~assets/stylus/variable.styl'</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>hover 时设置某个子元素的 background</d></pre> <pre><d class='s0'> .author-box:hover</d></pre> <pre><d class='s0'> background-color #f0f0f0</d></pre> <pre><d class='s0'> .meta</d></pre> <pre><d class='s0'> background-color #f0f0f0</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>button 最小 font-size 12px?</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>找不到对应的内容,可能是layout 不是 default</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>hover focus 无法同时指定,设置不能focus?</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>开发环境下,取消背景色要三处:</d></pre> <pre><d class='s0'><img src='..\pic\e3d623390706bbca78faaca2019007f3.jpg' /></d><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'><img src='..\pic\98cc5ce8e2bdb4c52edbe30c59bec12a.jpg' /></d><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s11'>infinite-scroll-url</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>这里都需要import:</d></pre> <pre><d class='s9'><</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>div </d><d class='s11'>class=</d><d class='s12'>"template-container"</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>v-header</d><d class='s9'>></</d><d class='s10'>v-header</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>nuxt</d><d class='s9'>/></d></pre> <pre><d class='s9'> </</d><d class='s10'>div</d><d class='s9'>></d></pre> <pre><d class='s9'></</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s9'></d></pre> <pre><d class='s9'><</d><d class='s10'>script</d><d class='s9'>></d></pre> <pre><d class='s9'> </d><d class='s10'>import </d><d class='s9'>VHeader </d><d class='s10'>from </d><d class='s12'>'~/components/home/header'</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>使用时不用import?已经注册组件了</d></pre> <pre><d class='s9'><</d><d class='s10'>el-container</d><d class='s9'>></d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'> tableData: Array(20).fill(item)</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'><template>:内容模板元素</d></pre> <pre><d class='s15'><a href='https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template'>https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template</a></d></pre> <pre><d class='s15'>不会显示在页面中。</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>等价,注意 return :</d></pre> <pre><d class='s15'> // render: h => h(App2)</d></pre> <pre><d class='s15'> render: function(h) {</d></pre> <pre><d class='s15'> return h(App2);</d></pre> <pre><d class='s15'> }</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>手风琴效果 accordion 只能展示一个</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s16'>mounted</d><d class='s9'>() {</d></pre> <pre><d class='s9'> checkNotLogin(</d><d class='s10'>this</d><d class='s9'>.$store, </d><d class='s10'>this</d><d class='s9'>.</d><d class='s13'>$router</d><d class='s9'>);</d></pre> <pre><d class='s9'> </d><d class='s10'>this</d><d class='s9'>.</d><d class='s16'>getUserInfo</d><d class='s9'>();</d></pre> <pre><d class='s9'>},</d></pre> <pre><d class='s17'></d></pre> <pre><d class='s17'></d></pre> <pre><d class='s13'>computed</d><d class='s9'>: {</d></pre> <pre><d class='s9'> ...</d><d class='s18'>mapState</d><d class='s9'>(</d><d class='s12'>'common'</d><d class='s9'>, [</d></pre> <pre><d class='s9'> </d><d class='s12'>'codeImgBase64'</d></pre> <pre><d class='s12'> </d><d class='s9'>]),</d></pre> <pre><d class='s9'> ...</d><d class='s18'>mapState</d><d class='s9'>(</d><d class='s12'>'auth'</d><d class='s9'>, [</d></pre> <pre><d class='s9'> </d><d class='s12'>'userInfo'</d></pre> <pre><d class='s12'> </d><d class='s9'>])</d></pre> <pre><d class='s17'></d></pre> <pre><d class='s13'>methods</d><d class='s9'>: {</d></pre> <pre><d class='s9'> ...</d><d class='s18'>mapMutations</d><d class='s9'>({</d></pre> <pre><d class='s9'> </d><d class='s13'>RECORD_USERINFO</d><d class='s9'>: </d><d class='s12'>'auth/RECORD_USERINFO'</d></pre> <pre><d class='s12'> </d><d class='s9'>}),</d></pre> <pre><d class='s17'></d></pre> <pre><d class='s2'>/</d></pre> <pre><d class='s3'> * 获取用户信息</d></pre> <pre><d class='s3'> */</d></pre> <pre><d class='s4'>getUserInfo</d><d class='s5'>() {</d></pre> <pre><d class='s5'> </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>ruleForm</d><d class='s5'>.</d><d class='s7'>nickname </d><d class='s5'>= </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>userInfo</d><d class='s5'>.</d><d class='s7'>nick</d><d class='s5'>;</d></pre> <pre><d class='s5'> </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>ruleForm</d><d class='s5'>.</d><d class='s7'>email </d><d class='s5'>= </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>userInfo</d><d class='s5'>.</d><d class='s7'>email</d><d class='s5'>;</d></pre> <pre><d class='s5'> </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>ruleForm</d><d class='s5'>.</d><d class='s7'>mobile </d><d class='s5'>= </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>userInfo</d><d class='s5'>.</d><d class='s7'>mobile</d><d class='s5'>;</d></pre> <pre><d class='s5'> </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>ruleForm</d><d class='s5'>.</d><d class='s7'>avatar </d><d class='s5'>= </d><d class='s6'>this</d><d class='s5'>.</d><d class='s7'>userInfo</d><d class='s5'>.</d><d class='s7'>pic</d><d class='s5'>;</d></pre> <pre><d class='s5'>},</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s9'><</d><d class='s10'>nuxt-link </d><d class='s11'>:to=</d><d class='s12'>"</d><d class='s9'>{ </d><d class='s13'>name</d><d class='s9'>: </d><d class='s12'>'book-username-detail'</d><d class='s9'>, </d><d class='s13'>params</d><d class='s9'>: {</d><d class='s13'>username</d><d class='s9'>: </d><d class='s13'>author</d><d class='s9'>.</d><d class='s13'>username</d><d class='s9'>} }</d><d class='s12'>"</d><d class='s9'>></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s10'>async </d><d class='s16'>telregister</d><d class='s9'>({commit}, data) {</d></pre> <pre><d class='s9'> </d><d class='s10'>return await this</d><d class='s9'>.</d><d class='s13'>$axios</d><d class='s9'>.$post(</d><d class='s12'>'/api/user/telregister'</d><d class='s9'>, data);</d></pre> <pre><d class='s9'>},</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>// 只能传一个 payload</d></pre> <pre><d class='s10'>this</d><d class='s9'>.$store.</d><d class='s16'>dispatch</d><d class='s9'>(</d><d class='s12'>"search/setUsers"</d><d class='s9'>, res.</d><d class='s13'>data</d><d class='s9'>.</d><d class='s13'>users</d><d class='s9'>);</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s10'>export const </d><d class='s18'>actions </d><d class='s9'>= {</d></pre> <pre><d class='s2'> </d><d class='s16'>setUsers</d><d class='s9'>({commit}, data) {</d></pre> <pre><d class='s9'> commit(</d><d class='s12'>"SET_USERS"</d><d class='s9'>, data);</d></pre> <pre><d class='s9'> },</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>this.$route.params.username</d></pre> <pre><d class='s0'>this.$route.params.detail</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>不必要 ref,用 $el</d></pre> <pre><d class='s0'>this.$refs["refInput"].select();</d></pre> <pre><d class='s0'>===</d></pre> <pre><d class='s0'>this.$el.querySelector("input").select();</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>无用代码:</d></pre> <pre><d class='s9'>...</d><d class='s18'>mapState</d><d class='s9'>({</d></pre> <pre><d class='s9'> </d><d class='s16'>isPhone</d><d class='s9'>: state => state.</d><d class='s16'>isPhone</d></pre> <pre><d class='s0'></d></pre> <h1 id='ol_2'>layout</h1> <pre><d class='s19'></d></pre> <h2 id='ol_3'>default.vue</h2> <pre><d class='s2'>/</d></pre> <pre><d class='s3'> * 在页面加载前先获取 localStorage 中的用户信息</d></pre> <pre><d class='s3'> /</d></pre> <pre><d class='s4'>mounted</d><d class='s5'>() {</d></pre> <pre><d class='s5'> </d><d class='s6'>this</d><d class='s5'>.$store.</d><d class='s4'>dispatch</d><d class='s5'>(</d><d class='s8'>'auth/getUserInfo'</d><d class='s5'>);</d></pre> <pre><d class='s5'>}</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s9'><</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>div </d><d class='s11'>class=</d><d class='s12'>"template-container"</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>v-header</d><d class='s9'>></</d><d class='s10'>v-header</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>nuxt</d><d class='s9'>/></d></pre> <pre><d class='s9'> </</d><d class='s10'>div</d><d class='s9'>></d></pre> <pre><d class='s9'></</d><d class='s10'>template</d><d class='s9'>></d></pre> <pre><d class='s0'></d></pre> <h1 id='ol_4'>auth.js</h1> <pre><d class='s10'>export const </d><d class='s9'>state = () => ({</d></pre> <pre><d class='s9'> </d><d class='s13'>userInfo</d><d class='s9'>: {},</d></pre> <pre><d class='s9'> </d><d class='s13'>isLogin</d><d class='s9'>: </d><d class='s10'>false</d></pre> <pre><d class='s9'>});</d><d class='s20'></d></pre> <pre><d class='s20'></d></pre> <pre><d class='s9'>[</d><d class='s18'>RECORD_USERINFO</d><d class='s9'>] (state, info) {</d></pre> <pre><d class='s9'> state.</d><d class='s13'>userInfo </d><d class='s9'>= info;</d></pre> <pre><d class='s9'> state.</d><d class='s13'>isLogin </d><d class='s9'>= </d><d class='s10'>true</d><d class='s9'>;</d></pre> <pre><d class='s9'> setStore(</d><d class='s12'>'user_info'</d><d class='s9'>, info);</d></pre> <pre><d class='s9'>},</d></pre> <pre><d class='s20'></d></pre> <h1 id='ol_5'>_pageNo.vue</h1> <pre><d class='s10'>async </d><d class='s16'>asyncData </d><d class='s9'>({ store, params }) {</d></pre> <pre><d class='s10'>let </d><d class='s18'>pageNo </d><d class='s9'>= parseInt(</d><d class='s14'>params.pageNo</d><d class='s9'>);</d></pre> <pre><d class='s9'></d></pre> <pre><d class='s21'></d></pre> <pre><d class='s11'>:id=</d><d class='s12'>"</d><d class='s13'>article</d><d class='s9'>.</d><d class='s13'>id</d><d class='s12'>"</d></pre> <pre><d class='s11'>:id=</d><d class='s12'>"</d><d class='s13'>article</d><d class='s9'>.</d><d class='s13'>id </d><d class='s9'>+ </d><d class='s12'>'sadfasdfsdf'"</d></pre> <pre><d class='s21'></d></pre> <pre><d class='s9'><</d><d class='s10'>div </d><d class='s11'>class=</d><d class='s12'>"page-btn"</d><d class='s9'>></d></pre> <pre><d class='s9'> <</d><d class='s10'>el-pagination </d><d class='s11'>background layout=</d><d class='s12'>"prev, pager, next" </d><d class='s11'>:total=</d><d class='s12'>"</d><d class='s13'>total</d><d class='s12'>" </d><d class='s11'>:pager-count=</d><d class='s12'>"</d><d class='s11'>5</d><d class='s12'>" </d><d class='s11'>:page-size=</d><d class='s12'>"</d><d class='s13'>page_size</d><d class='s12'>" </d><d class='s11'>:current-page=</d><d class='s12'>"</d><d class='s13'>current_page</d><d class='s12'>"</d><d class='s9'>></d></pre> <pre><d class='s9'> </</d><d class='s10'>el-pagination</d><d class='s9'>></d></pre> <pre><d class='s9'></</d><d class='s10'>div</d><d class='s9'>></d></pre> <pre><d class='s21'></d></pre> <pre><d class='s21'></d></pre> <h1 id='ol_6'>index.vue</h1> <pre><d class='s21'>.editorconfig</d></pre> <pre><d class='s21'>detect indent</d></pre> <pre><d class='s21'></d></pre> <pre><d class='s21'>asyncData:ssr时在服务器端执行,浏览器不执行。在用户手动路由时,会执行。</d></pre> <pre><d class='s21'></d></pre> <h1 id='ol_7'>router</h1> <pre><d class='s1'>E:\uninote\mynote-front.nuxt\router.js</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s1'> <li :class="this.$route.name == 'user-fans' ? 'have-bgcolor' : ''" @click="hideMenu"></d></pre> <pre><d class='s1'> <</d><d class='s22'>nuxt-link </d><d class='s1'>to="/user/fans"></d></pre> <pre><d class='s1'> <i class="iconfont ic-friends"></i></d></pre> <pre><d class='s1'> <span>互相关注</span></d></pre> <pre><d class='s1'> </nuxt-link></d></pre> <pre><d class='s1'> </li></d></pre> <pre><d class='s15'></d></pre> <h1 id='ol_8'>mapState</h1> <pre><d class='s15'>E:\uninote\mynote-front\pages\index.vue</d></pre> <pre><d class='s13'>computed</d><d class='s9'>: {</d></pre> <pre><d class='s9'> ...</d><d class='s18'>mapState</d><d class='s9'>(</d><d class='s12'>'article'</d><d class='s9'>, [</d></pre> <pre><d class='s9'> </d><d class='s12'>'recommendList'</d></pre> <pre><d class='s12'> </d><d class='s9'>]),</d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>this.recommendList === this.$store.state.article.recommendList</d></pre> <pre><d class='s21'></d></pre> <pre><d class='s21'>vuex 源码:深入 vuex 之辅助函数 mapState</d></pre> <pre><d class='s21'><a href='https://juejin.im/post/5ae433ab518825671a6388d5'>https://juejin.im/post/5ae433ab518825671a6388d5</a></d></pre> <pre><d class='s15'></d></pre> <t id='0af9f526-a485-4747-970c-993e8fdb9ee3'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_9'>mynote front 部署</h1> <pre><d class='s1'>E:\xunwu\projects\官网\xunwu\README.md</d></pre> <pre><d class='s15'><a href='..\vue/nuxt.html'>nuxt </a></d><d class='s23'><[--</d></pre> <pre><d class='s24'>问题:使用 nuxt start,至少要 npm install nuxt 这个很大、很多文件</d></pre> <pre><d class='s24'>--]></d><d class='s15'></d></pre> <pre><d class='s15'><a href='..\nodejs/nodejs.html#64a53760-0c37-4bfb-811e-61babcc2f8a0'>nodejs linux 安装 </a></d></pre> <pre><d class='s15'><a href='..\nodejs/npm.html#be92dbac-1d01-4e66-a3aa-9a7ab59f1713'>node-sass </a></d></pre> <pre><d class='s15'><a href='..\nodejs/npm.html#d50e55d1-ccb5-4263-bd00-141795c2c9a2'>npm config </a></d></pre> <pre><d class='s15'></d></pre> <pre><d class='s15'>cd --front--install-path--</d></pre> <pre><d class='s22'>npm config set registry <a href='https://registry.npm.taobao.org'>https://registry.npm.taobao.org</a></d><d class='s15'></d></pre> <pre><d class='s0'>npm config set sass_binary_site <a href='https://npm.taobao.org/mirrors/node-sass/'>https://npm.taobao.org/mirrors/node-sass/</a></d><d class='s15'></d></pre> <pre><d class='s15'>npm install </d><d class='s17'>--user=0</d><d class='s15'></d></pre> <pre><d class='s0'>npx nuxt </d><d class='s17'>build</d><d class='s0'></d></pre> <pre><d class='s0'>npm install -g pm2</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s25'>不用pm2,启动(production mode)命令为 npx nuxt start,因此,pm2 启动为(-- 后面的参数会传递给 npx 命令):</d></pre> <pre><d class='s26'>pm2 start npx -- nuxt start</d></pre> <pre><d class='s26'>pm2 delete npx</d><d class='s17'></d></pre> <pre><d class='s15'></d></pre> <h2 id='ol_10'>linux 脚本 汇总</h2> <pre><d class='s0'></d></pre> <pre><d class='s0'># 上传 node 安装包、front git 压缩包 到 /root/init</d></pre> <pre><d class='s1'>cd /root/init</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'># 解压 front</d></pre> <pre><d class='s0'># 修改 my.js 配置</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s1'>-- node 安装</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s0'>cd /home/www/front</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s22'>npm config set registry <a href='https://registry.npm.taobao.org'>https://registry.npm.taobao.org</a></d><d class='s15'></d></pre> <pre><d class='s0'>npm config set sass_binary_site <a href='https://npm.taobao.org/mirrors/node-sass/'>https://npm.taobao.org/mirrors/node-sass/</a></d><d class='s15'></d></pre> <pre><d class='s15'>npm install </d><d class='s17'>--user=0</d><d class='s15'></d></pre> <pre><d class='s0'>npm install -g pm2</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>npx nuxt </d><d class='s17'>build</d><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>pm2 start npx -- nuxt start</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'># 虚拟内存</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>cd /usr</d></pre> <pre><d class='s0'>mkdir swap</d></pre> <pre><d class='s0'>cd swap/</d></pre> <pre><d class='s0'>dd if=/dev/zero of=/usr/swap/swapfile bs=1M count=2048</d></pre> <pre><d class='s0'>mkswap /usr/swap/swapfile</d></pre> <pre><d class='s0'>swapon /usr/swap/swapfile</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'># 设置开机自动启用虚拟内存,在etc/fstab文件中加入如下命令</d></pre> <pre><d class='s0'># 使用vim编辑器打开/etc/fstab文件</d></pre> <pre><d class='s0'>echo "/usr/swap/swapfile swap swap defaults 0 0" >> /etc/fstab</d></pre> <pre><d class='s15'></d></pre> <h2 id='ol_11'>windows</h2> <pre><d class='s1'>〖E:\uninote\deploy-windows〗</d><d class='s15'></d></pre> <pre><d class='s27'></d></pre> <h2 id='ol_12'>mynote front servers</h2> <pre><d class='s15'><a href='mynote_server.html#cb0f7556-8abb-40b8-b8db-c3315c2bf4e1'>mynote test/dev server </a></d></pre> </t> <pre><d class='s15'></d></pre> <t id='5c13d15c-9cdb-4218-a057-05fff89b6b1a'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_13'>图片等比例缩放 scaleImg</h1> <pre><d class='s15'><a href='..\css/css_doc.html#0bb531ec-73e4-430e-a63d-e15209970fcb'>align center 居中 </a></d></pre> <pre><d class='s19'></d></pre> <pre><d class='s28'>SHA-1: 2f1374818427b85c70657c4a47e303fcd64ee308</d></pre> <pre><d class='s28'> [feat]: </d><d class='s29'>首页文章缩略图等比例缩放</d></pre> <pre><d class='s19'></d></pre> <pre><d class='s25'>naturalWidth naturalHeight</d></pre> <pre><d class='s25'>load 事件</d></pre> <pre><d class='s25'>uninote_scaled 缓存</d></pre> <pre><d class='s25'>mode:fill full</d></pre> <pre><d class='s25'>container 需要 relative、abs等 position</d></pre> <pre><d class='s25'>组件的mounted updated 都需要监听</d></pre> <pre><d class='s25'></d></pre> <pre><d class='s25'>问题:</d></pre> <pre><d class='s25'>通过 ref 拿到组件,但没法追加监听 mounted/updated ?</d><d class='s0'></d></pre> </t> <pre><d class='s0'></d></pre> <t id='11fccc13-f50f-40ff-86af-4202f5a4a100'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_14'>mynote-front my config</h1> <pre><d class='s1'>因为是嵌套结构,所以用这种方式更方便:</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s0'>// load custom config</d></pre> <pre><d class='s0'>var fs = require("fs");</d></pre> <pre><d class='s0'>let path = __dirname + '/nuxt.config.my.js';</d></pre> <pre><d class='s0'>if (fs.existsSync(path)) {</d></pre> <pre><d class='s0'> myconfig = require(path);</d></pre> <pre><d class='s0'> myconfig(module.exports);</d></pre> <pre><d class='s0'>}</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>---- nuxt.config.my.js</d></pre> <pre><d class='s0'>// 直接修改默认配置</d></pre> <pre><d class='s0'>module.exports = function (config) {</d></pre> <pre><d class='s0'> config.proxy["/api"] = "<a href='http://uninote.com.cn/'>http://uninote.com.cn/</a>";</d></pre> <pre><d class='s0'> // config.proxy["/api"] = "http://localhost:222/";</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> config.build.extend = function (config, ctx) {</d></pre> <pre><d class='s0'> config.devtool = 'source-map';</d></pre> <pre><d class='s0'> }</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> config.server.port = 80;</d></pre> <pre><d class='s0'>}</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>---- nuxt.config.my.js for test</d></pre> <pre><d class='s0'>// 直接修改默认配置</d></pre> <pre><d class='s0'>module.exports = function (config) {</d></pre> <pre><d class='s0'> config.proxy["/api"] = "<a href='http://dev.rongyipiao.com/'>http://dev.rongyipiao.com/</a>";</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> config.build.extend = function (config, ctx) {</d></pre> <pre><d class='s0'> config.devtool = 'none';</d></pre> <pre><d class='s0'> }</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> config.server.port = 80;</d></pre> <pre><d class='s0'>}</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>---- for test local</d></pre> <pre><d class='s0'>// 直接修改默认配置</d></pre> <pre><d class='s0'>module.exports = function (config) {</d></pre> <pre><d class='s0'> // config.proxy["/api"] = "<a href='http://uninote.com.cn/'>http://uninote.com.cn/</a>";</d></pre> <pre><d class='s0'> config.axios.baseURL = config.proxy["/api"] = "<a href='http://192.168.0.121/'>http://192.168.0.121/</a>";</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> config.build.extend = function (config, ctx) {</d></pre> <pre><d class='s0'> config.devtool = 'source-map';</d></pre> <pre><d class='s0'> }</d></pre> <pre><d class='s0'> config.server.port = 3333;</d></pre> <pre><d class='s0'>}</d></pre> <pre><d class='s0'></d></pre> </t> <pre><d class='s20'></d></pre> <h1 id='ol_15'>mynote front design</h1> <pre><d class='s15'><a href='mynote_design.html'>mynote design </a></d></pre> <pre><d class='s0'></d></pre> <t id='c10a7f56-c457-4616-bb8a-0289fd93b123'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_16'>mynote front element-ui</h1> <pre><d class='s15'>Nuxt中ElementUI的使用</d></pre> <pre><d class='s15'><a href='https://www.cnblogs.com/shenyf/p/8361049.html'>https://www.cnblogs.com/shenyf/p/8361049.html</a></d></pre> <pre><d class='s15'><a href='https://blog.csdn.net/Calla_Lj/article/details/86592491'>https://blog.csdn.net/Calla_Lj/article/details/86592491</a></d></pre> <pre><d class='s15'></d></pre> <pre><d class='s0'>nuxt.config.js</d></pre> <pre><d class='s0'>css: [</d></pre> <pre><d class='s0'> 'element-ui/lib/theme-chalk/index.css',</d></pre> <pre><d class='s0'> '~/assets/stylus/main.styl'</d></pre> <pre><d class='s0'>],</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>assets/stylus/variable.styl 全局公共变量</d></pre> <pre><d class='s0'></d></pre> <h2 id='ol_17'>element-ui 主题</h2> <pre><d class='s15'><a href='../elementui.html#948326dc-1327-48f0-ba0c-96165dd080af'>定制主题 theme </a></d></pre> <pre><d class='s0'>assets/element-variables.scss element ui 主题修改 </d></pre> <pre><d class='s0'>c1ecf1c94d7881e2ea8fc0472d7bbc89dc74574b</d></pre> <pre><d class='s15'></d></pre> </t> <pre><d class='s20'></d></pre> <t id='89e4d335-1eb3-4d9a-a0bb-b8f22e335e96'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_18'>mynote front kbp</h1> <pre><d class='s19'></d></pre> <h2 id='ol_19'>到后台服务器的网络请求监控</h2> <pre><d class='s0'></d></pre> <pre><d class='s0'>http.js:</d></pre> <pre><d class='s0'>function request(url, options, cb) {</d></pre> <pre><d class='s0'> return new ClientRequest(url, options, cb);</d></pre> <pre><d class='s0'>}</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>E:\uninote\mynote-front\node_modules</d><d class='s17'>@nuxt\server\dist\server.js</d><d class='s0'></d></pre> <pre><d class='s0'>const nuxtMiddleware = ({ options, nuxt, renderRoute, resources }) => async function nuxtMiddleware(req, res, next) {</d></pre> <pre><d class='s0'> // Get context</d></pre> <pre><d class='s0'> const context = utils.getContext(req, res);</d></pre> <pre><d class='s0'> const url = decodeURI(req.url);</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> res.statusCode = 200;</d></pre> <pre><d class='s0'> try {</d></pre> <pre><d class='s0'> const result = await renderRoute(url, context);</d></pre> <pre><d class='s0'> await nuxt.callHook('render:route', url, result, context);</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>/</d></pre> <pre><d class='s0'> * Dispatch a request</d></pre> <pre><d class='s0'> *</d></pre> <pre><d class='s0'> * @param {Object} config The config specific for this request (merged with this.defaults)</d></pre> <pre><d class='s0'> */</d></pre> <pre><d class='s0'>Axios.prototype.request = function request(config) {</d></pre> <pre><d class='s0'> /eslint no-param-reassign:0/</d></pre> <pre><d class='s0'> // Allow for axios('example/url'[, config]) a la fetch API</d></pre> <pre><d class='s0'> if (typeof config === 'string') {</d></pre> <pre><d class='s0'> config = utils.merge({</d></pre> <pre><d class='s0'> url: arguments[0]</d></pre> <pre><d class='s0'> }, arguments[1]);</d></pre> <pre><d class='s0'> }</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> config = utils.merge(defaults, {method: 'get'}, this.defaults, config);</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s17'>net.js:</d><d class='s0'></d></pre> <pre><d class='s0'>function connect(...args) {</d></pre> <pre><d class='s0'> var normalized = normalizeArgs(args);</d></pre> <pre><d class='s0'> var options = normalized[0];</d></pre> <pre><d class='s0'> debug('createConnection', normalized);</d></pre> <pre><d class='s0'> var socket = new Socket(options);</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> if (options.timeout) {</d></pre> <pre><d class='s0'> socket.setTimeout(options.timeout);</d></pre> <pre><d class='s0'> }</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'> return socket.connect(normalized);</d></pre> <pre><d class='s0'>}</d></pre> <pre><d class='s19'></d></pre> <h3 id='ol_20'>ssr时</h3> <pre><d class='s0'>E:\uninote\mynote-front-test\node_modules\follow-redirects\index.js</d></pre> <pre><d class='s0'> assert.equal(options.protocol, protocol, "protocol mismatch");</d></pre> <pre><d class='s0'> debug("options", options);</d></pre> <pre><d class='s0'> return new RedirectableRequest(options, callback);</d></pre> <pre><d class='s0'> };</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>E:\uninote\mynote-front\node_modules\follow-redirects\index.js</d></pre> <pre><d class='s0'> // Create the native request</d></pre> <pre><d class='s0'> var request = this._currentRequest =</d></pre> <pre><d class='s0'> nativeProtocol.request(this._options, this._onNativeResponse);</d></pre> <pre><d class='s0'>console.log(this._options);</d></pre> <pre><d class='s0'> this._currentUrl = url.format(this._options);</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>E:\uninote\mynote-front\node_modules</d><d class='s17'>axios\lib\core\Axios.js</d><d class='s0'></d></pre> <pre><d class='s0'>Axios.prototype.request = function request(config) {</d></pre> <pre><d class='s0'> /eslint no-param-reassign:0/</d></pre> <pre><d class='s0'> // Allow for axios('example/url'[, config]) a la fetch API</d></pre> <pre><d class='s0'> if (typeof config === 'string') {</d></pre> <pre><d class='s0'> config = utils.merge({</d></pre> <pre><d class='s0'> url: arguments[0]</d></pre> <pre><d class='s0'> }, arguments[1]);</d></pre> <pre><d class='s0'> }</d><d class='s19'></d></pre> <pre><d class='s19'></d></pre> <h3 id='ol_21'>非ssr时</h3> <pre><d class='s19'></d></pre> <pre><d class='s0'>E:\uninote\mynote-front-test\node_modules\http-proxy\lib\http-proxy\passes\web-incoming.js</d></pre> <pre><d class='s0'>console.log("req:", req.hostname, req.path, "--->", options.hostname);</d></pre> <pre><d class='s0'>var proxyReq = (options.target.protocol === 'https:' ? https : http).request(</d></pre> <pre><d class='s0'> common.setupOutgoing(options.ssl || {}, options, req)</d></pre> <pre><d class='s0'>);</d></pre> <pre><d class='s19'></d></pre> </t> <pre><d class='s20'></d></pre> <t id='852d6fd2-1aa7-4c96-97f2-139aa86a6834'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_22'>mynote front ssr</h1> <pre><d class='s15'><a href='mynote-front.html#89e4d335-1eb3-4d9a-a0bb-b8f22e335e96'>mynote front kbp </a></d></pre> <pre><d class='s15'><a href='..\vue/nuxt.html#9ee57b93-8339-42e7-ac49-3fa5f131bae2'>nuxt ssr </a></d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>E:\uninote\mynote-front-test\node_modules@nuxtjs\axios\lib\module.js</d></pre> <pre><d class='s0'> // Set AXIOS_BASE_URL for dynamic SSR baseURL</d></pre> <pre><d class='s0'> process.env.AXIOS_BASE_URL = options.baseURL</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s0'>最终被生成到了这里:</d></pre> <pre><d class='s0'>E:\uninote\mynote-front-test.nuxt\axios.js</d></pre> <pre><d class='s10'>export default </d><d class='s9'>(ctx, inject) => {</d></pre> <pre><d class='s9'> </d><d class='s2'>// baseURL</d></pre> <pre><d class='s2'> </d><d class='s10'>const </d><d class='s18'>baseURL </d><d class='s9'>= </d><d class='s13'>process</d><d class='s9'>.browser</d></pre> <pre><d class='s9'> ? </d><d class='s12'>'/'</d></pre> <pre><d class='s12'> </d><d class='s9'>: (</d><d class='s13'>process</d><d class='s9'>.env.AXIOS_BASE_URL || </d><d class='s12'>'<a href='http://192.168.0.121/'>http://192.168.0.121/</a>'</d><d class='s9'>)</d></pre> <pre><d class='s30'></d></pre> <h2 id='ol_23'>填坑记录</h2> <pre><d class='s1'>collin 将 ssr 的代理 baseURL 配置删除了,因此 ssr 代理的 base 由默认值决定。部署的 test1 正常:</d></pre> <pre><d class='s1'>axios.js 生成为:</d></pre> <pre><d class='s1'> // baseURL</d></pre> <pre><d class='s1'> const baseURL = process.browser</d></pre> <pre><d class='s1'> ? '/'</d></pre> <pre><d class='s1'> : (process.env.AXIOS_BASE_URL || 'http://localhost:80/')</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s1'>而 test1 front server 正好是在 80 端口,因此此 ssr 代理请求作为普通的请求将再次被代理,此时能正确的拿到结果。</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s25'>再次部署 test2 就出了问题:</d></pre> <pre><d class='s25'>axios.js 生成为(端口变为3000,gogs的端口,原因不得而知):</d><d class='s1'></d></pre> <pre><d class='s1'> // baseURL</d></pre> <pre><d class='s1'> const baseURL = process.browser</d></pre> <pre><d class='s1'> ? '/'</d></pre> <pre><d class='s1'> : (process.env.AXIOS_BASE_URL || 'http://localhost:3000/')</d></pre> <pre><d class='s1'>因此代理结果将变为 404。</d></pre> </t> </body></html>

mynote

mynote_app

点赞(0) 阅读(76) 举报
目录
标题