Uninote
Uninote
用户根目录
每日点滴
 mynote-front
mynote-front
https://zh.nuxtjs.org/guide/routing
https://cn.vuejs.org/v2/api/#v-bind
https://vuex.vuejs.org/zh/guide/modules.html
offcanvas-bar 响应式时的用户目录

mynote-front jy

https://github.com/shhdgit/vue-easy-slider
nuxt.config.my.js
gogs 修改密码错误:先确认 gogs_token 是否配置正确
/**
 * 显示上传图片弹框
 */
showUploadDialog() {
  this.editor.executePlugin("imageDialog", "image-dialog/image-dialog");
},
必须要有main:
<template>
    <main class="content-container" ref="container">
        123
    </main>
</template>
<script>
</script>
这样也可以:register.vue
<template>
  <div class="main">
hover 要这样:
.default-button
  width 100%
  &:hover,&:active
dd-item 要放里面,否则会被默认的覆盖
<el-dropdown-item class="dd-item">
  <nuxt-link to="/user/setting" class="dd-item">用户中心</nuxt-link>
</el-dropdown-item>
便于区分:dd-menu dd-item
E:\uninote\mynote-front\assets\stylus\header.styl
@import '~assets/stylus/variable.styl'
hover 时设置某个子元素的 background
  .author-box:hover
    background-color #f0f0f0
    .meta
      background-color #f0f0f0
button 最小 font-size 12px?
找不到对应的内容,可能是layout 不是 default
hover focus 无法同时指定,设置不能focus?
开发环境下,取消背景色要三处:
infinite-scroll-url
这里都需要import:
<template>
  <div class="template-container">
    <v-header></v-header>
    <nuxt/>
  </div>
</template>
<script>
  import VHeader from '~/components/home/header'
使用时不用import?已经注册组件了
<el-container>
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.
        tableData: Array(20).fill(item)
<template>:内容模板元素
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template
不会显示在页面中。
等价,注意 return :
  // render: h => h(App2)
  render: function(h) {
    return h(App2);
  }
手风琴效果 accordion 只能展示一个
mounted() {
  checkNotLogin(this.$store, this.$router);
  this.getUserInfo();
},
computed: {
  ...mapState('common', [
    'codeImgBase64'
  ]),
  ...mapState('auth', [
    'userInfo'
  ])
methods: {
  ...mapMutations({
    RECORD_USERINFO: 'auth/RECORD_USERINFO'
  }),
/**
 * 获取用户信息
 */
getUserInfo() {
  this.ruleForm.nickname = this.userInfo.nick;
  this.ruleForm.email = this.userInfo.email;
  this.ruleForm.mobile = this.userInfo.mobile;
  this.ruleForm.avatar = this.userInfo.pic;
},
<nuxt-link :to="{ name: 'book-username-detail', params: {username: author.username} }">
async telregister({commit}, data) {
  return await this.$axios.$post('/api/user/telregister', data);
},
// 只能传一个 payload
this.$store.dispatch("search/setUsers", res.data.users);
export const actions = {
  setUsers({commit}, data) {
    commit("SET_USERS", data);
  },
this.$route.params.username
this.$route.params.detail
不必要 ref,用 $el
this.$refs["refInput"].select();
===
this.$el.querySelector("input").select();
无用代码:
...mapState({
  isPhone: state => state.isPhone

layout

default.vue

/**
 * 在页面加载前先获取 localStorage 中的用户信息
 */
mounted() {
  this.$store.dispatch('auth/getUserInfo');
}
<template>
  <div class="template-container">
    <v-header></v-header>
    <nuxt/>
  </div>
</template>

auth.js

export const state = () => ({
  userInfo: {},
  isLogin: false
});
[RECORD_USERINFO] (state, info) {
  state.userInfo = info;
  state.isLogin = true;
  setStore('user_info', info);
},

_pageNo.vue

async asyncData ({ store, params }) {
let pageNo = parseInt(params.pageNo);
:id="article.id"
:id="article.id + 'sadfasdfsdf'"
<div class="page-btn">
  <el-pagination background layout="prev, pager, next" :total="total" :pager-count="5" :page-size="page_size" :current-page="current_page">
  </el-pagination>
</div>

index.vue

.editorconfig
detect indent
asyncData:ssr时在服务器端执行,浏览器不执行。在用户手动路由时,会执行。

router

E:\uninote\mynote-front\.nuxt\router.js
            <li :class="this.$route.name == 'user-fans' ? 'have-bgcolor' : ''" @click="hideMenu">
              <nuxt-link to="/user/fans">
                <i class="iconfont ic-friends"></i>
                <span>互相关注</span>
              </nuxt-link>
            </li>

mapState

E:\uninote\mynote-front\pages\index.vue
computed: {
  ...mapState('article', [
    'recommendList'
  ]),
this.recommendList === this.$store.state.article.recommendList
vuex 源码:深入 vuex 之辅助函数 mapState
https://juejin.im/post/5ae433ab518825671a6388d5
lv1= lv2= type=

mynote front 部署

E:\xunwu\projects\官网\xunwu\README.md
nuxt <[--
问题:使用 nuxt start,至少要 npm install nuxt 这个很大、很多文件
--]>
nodejs linux 安装 
node-sass 
npm config 
cd --front--install-path--
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm install --user=0
npx nuxt build
npm install -g pm2
不用pm2,启动(production mode)命令为 npx nuxt start,因此,pm2 启动为(-- 后面的参数会传递给 npx 命令):
pm2 start npx -- nuxt start
pm2 delete npx

linux 脚本 汇总

# 上传 node 安装包、front git 压缩包 到 /root/init
cd /root/init
# 解压 front
# 修改 my.js 配置
-- node 安装
cd /home/www/front
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm install --user=0
npm install -g pm2
npx nuxt build
pm2 start npx -- nuxt start
# 虚拟内存
cd /usr
mkdir swap
cd swap/
dd if=/dev/zero of=/usr/swap/swapfile bs=1M count=2048
mkswap /usr/swap/swapfile
swapon /usr/swap/swapfile
# 设置开机自动启用虚拟内存,在etc/fstab文件中加入如下命令
# 使用vim编辑器打开/etc/fstab文件
echo "/usr/swap/swapfile swap swap defaults 0 0" >> /etc/fstab

windows

〖E:\uninote\deploy-windows〗

mynote front servers

mynote test/dev server 
lv1= lv2= type=

图片等比例缩放 scaleImg

align center 居中 
SHA-1: 2f1374818427b85c70657c4a47e303fcd64ee308
* [feat]: 首页文章缩略图等比例缩放
naturalWidth naturalHeight
load 事件
__uninote_scaled__ 缓存
mode:fill full
container 需要 relative、abs等 position
组件的mounted updated 都需要监听
问题:
通过 ref 拿到组件,但没法追加监听 mounted/updated ?
lv1= lv2= type=

mynote-front my config

因为是嵌套结构,所以用这种方式更方便:
// load custom config
var fs = require("fs");
let path = __dirname + '/nuxt.config.my.js';
if (fs.existsSync(path)) {
    myconfig = require(path);
    myconfig(module.exports);
}
---- nuxt.config.my.js
// 直接修改默认配置
module.exports = function (config) {
  config.proxy["/api"] = "http://uninote.com.cn/";
  // config.proxy["/api"] = "http://localhost:222/";
  config.build.extend = function (config, ctx) {
    config.devtool = 'source-map';
  }
  config.server.port = 80;
}
---- nuxt.config.my.js for test
// 直接修改默认配置
module.exports = function (config) {
  config.proxy["/api"] = "http://dev.rongyipiao.com/";
  config.build.extend = function (config, ctx) {
    config.devtool = 'none';
  }
  config.server.port = 80;
}
---- for test local
// 直接修改默认配置
module.exports = function (config) {
  // config.proxy["/api"] = "http://uninote.com.cn/";
  config.axios.baseURL = config.proxy["/api"] = "http://192.168.0.121/";
  config.build.extend = function (config, ctx) {
    config.devtool = 'source-map';
  }
  config.server.port = 3333;
}

mynote front design

mynote design 
lv1= lv2= type=

mynote front element-ui

Nuxt中ElementUI的使用
https://www.cnblogs.com/shenyf/p/8361049.html
https://blog.csdn.net/Calla_Lj/article/details/86592491
nuxt.config.js
css: [
  'element-ui/lib/theme-chalk/index.css',
  '~/assets/stylus/main.styl'
],
assets/stylus/variable.styl 全局公共变量

element-ui 主题

定制主题 theme 
assets/element-variables.scss element ui 主题修改 
c1ecf1c94d7881e2ea8fc0472d7bbc89dc74574b
lv1= lv2= type=

mynote front kbp

到后台服务器的网络请求监控

http.js:
function request(url, options, cb) {
  return new ClientRequest(url, options, cb);
}
E:\uninote\mynote-front\node_modules\@nuxt\server\dist\server.js
const nuxtMiddleware = ({ options, nuxt, renderRoute, resources }) => async function nuxtMiddleware(req, res, next) {
  // Get context
  const context = utils.getContext(req, res);
  const url = decodeURI(req.url);
  res.statusCode = 200;
  try {
    const result = await renderRoute(url, context);
    await nuxt.callHook('render:route', url, result, context);
/**
 * Dispatch a request
 *
 * @param {Object} config The config specific for this request (merged with this.defaults)
 */
Axios.prototype.request = function request(config) {
  /*eslint no-param-reassign:0*/
  // Allow for axios('example/url'[, config]) a la fetch API
  if (typeof config === 'string') {
    config = utils.merge({
      url: arguments[0]
    }, arguments[1]);
  }
  config = utils.merge(defaults, {method: 'get'}, this.defaults, config);
net.js:
function connect(...args) {
  var normalized = normalizeArgs(args);
  var options = normalized[0];
  debug('createConnection', normalized);
  var socket = new Socket(options);
  if (options.timeout) {
    socket.setTimeout(options.timeout);
  }
  return socket.connect(normalized);
}

ssr时

E:\uninote\mynote-front-test\node_modules\follow-redirects\index.js
      assert.equal(options.protocol, protocol, "protocol mismatch");
      debug("options", options);
      return new RedirectableRequest(options, callback);
    };
E:\uninote\mynote-front\node_modules\follow-redirects\index.js
  // Create the native request
  var request = this._currentRequest =
        nativeProtocol.request(this._options, this._onNativeResponse);
console.log(this._options);
  this._currentUrl = url.format(this._options);
E:\uninote\mynote-front\node_modules\axios\lib\core\Axios.js
Axios.prototype.request = function request(config) {
  /*eslint no-param-reassign:0*/
  // Allow for axios('example/url'[, config]) a la fetch API
  if (typeof config === 'string') {
    config = utils.merge({
      url: arguments[0]
    }, arguments[1]);
  }

非ssr时

E:\uninote\mynote-front-test\node_modules\http-proxy\lib\http-proxy\passes\web-incoming.js
console.log("req:", req.hostname, req.path, "--->", options.hostname);
var proxyReq = (options.target.protocol === 'https:' ? https : http).request(
  common.setupOutgoing(options.ssl || {}, options, req)
);
lv1= lv2= type=

mynote front ssr

mynote front kbp 
nuxt ssr 
E:\uninote\mynote-front-test\node_modules\@nuxtjs\axios\lib\module.js
  // Set _AXIOS_BASE_URL_ for dynamic SSR baseURL
  process.env._AXIOS_BASE_URL_ = options.baseURL
最终被生成到了这里:
E:\uninote\mynote-front-test\.nuxt\axios.js
export default (ctx, inject) => {
  // baseURL
  const baseURL = process.browser
      ? '/'
      : (process.env._AXIOS_BASE_URL_ || 'http://192.168.0.121/')

填坑记录

collin 将 ssr 的代理 baseURL 配置删除了,因此 ssr 代理的 base 由默认值决定。部署的 test1 正常:
axios.js 生成为:
  // baseURL
  const baseURL = process.browser
      ? '/'
      : (process.env._AXIOS_BASE_URL_ || 'http://localhost:80/')
而 test1 front server 正好是在 80 端口,因此此 ssr 代理请求作为普通的请求将再次被代理,此时能正确的拿到结果。
再次部署 test2 就出了问题:
axios.js 生成为(端口变为3000,gogs的端口,原因不得而知):
  // baseURL
  const baseURL = process.browser
      ? '/'
      : (process.env._AXIOS_BASE_URL_ || 'http://localhost:3000/')
因此代理结果将变为 404。

mynote

mynote_app

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