vuecil教程

『壹』 nuxtclient打包文件不停的请求

原因是直接执行npmrunbuild，生成一个.output目录。
查阅了官网的配谈昌置文档，发现app.buildAssetsDir可以改变静态资源的输出路径（默认值也的确是_nuxt），于是将其改成/后再次打包，然而并没有任何变化。在仔细看了两遍文档无果后，只能撸起袖子从代码入手，最后在.output/server/chunks/render.mjs里发现。
nuxt-client-init-mole为Nuxt.js提供了在客户端初始化时注入处理的能力。就像nuxtServerInit一样，含帆扒可以在根Vuex模块中实现nuxtClientInit操作，该操作仅在客户端渲染时执行。vue-cil项目中通过localstorage或者cookie使vuex的状态持久化，因为vuex刷新后数据会丢失。nuxt项目中created钩子中不存在window对象（localstorage或者cookie的设置需要window对象），比如想要获取登录状态即判断是否存在token时，只能在轿扮mounted中进行操作，但这样又会引发一个问题，就是进页面的一瞬间还是无法得知登录状态，体验上会有影响，会存在显示用户名等组件显示隐藏延迟。

『贰』 sourcemap没有webpack://文件夹

关于webpack.config.js文件没有的原因

Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。

vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个核闭是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

vue-cil3之后创建项目后的目录结构如下

├── README.md # 说明
|-- dist # 打包后文件夹
├── babel.config.js # babel语法编译
├── package-lock.json
├── public # 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。
│ ├──改皮裂 favicon.ico
│ └── index.html #入口页面
└── src # 源码目录
├── App.vue - 页面
├── assets - 静态目录,这类引用会被 webpack 处理。
│ └── logo.png
├── components 组件
│ └── HelloWorld.vue
└── main.js # 入口文件，加载公共组件
│—— vue.config.js # 配置文件，需自行配置
│—— .gitignore # git忽略上传的文件格式
│—— babel.config.js # babel语法编译
│—— package.json # 项目基本信息
│—— .env # 环境变量和模式，需自行配置
│—— .eslintrc.js # ES-lint校验

开发者一般不需要再去知道 webpack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。
Vue-cli3+ 和 Vue-cli2 的最大区别：在于内置了很多配置，没有 build 文件夹和 config 的配置。但是在开发中，避免不了的还是需要个性化的配置，这里讲一下 vue.config.js 的配置。
手动创建一个 vue.config.js

mole.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 构建时的输出目录
assetsDir: 'static', // 放置静态资源的目录
indexPath: 'index.html', // html 的输出路径
filenameHashing: true, // 文件名哈希值
lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

// 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
// template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
// runtime-only：将template在打包的时候，就已经编译为render函数
// runtime-compiler：在运行的时候才去编译template
runtimeCompiler: false,

transpileDependencies: [], // babel-loader 默认会跳过 node_moles 依握并赖。
proctionSourceMap: false, // 是否为生产环境构建生成 source map

//调整内部的 webpack 配置
configureWebpack: () => { },

chainWebpack: () => { },

// 配置 webpack-dev-server 行为。
devServer: {
open: true, // 编译后默认打开浏览器
host: '0.0.0.0', // 域名
port: 8080, // 端口
https: false, // 是否https
// 显示警告和错误
overlay: {
warnings: false,
errors: true
},
}
}
没有配置vue.config.js之前，打包后的文件如下

注意：此时直接打开index.html文件可能页面的图片没有显示
在这里插入图片描述

配置后

注意：此时dist文件底下会创建一个static文件夹，用来存放静态文件，如css、js、font、img,
此时打开index.html文件页面图片可以正常显示

『叁』 clicli动漫怎么投屏

1、首先打开clicli软件。
2、然后在设置中打开世埋投猜返颂屏设置并确定。
3、最后找到一面光滑的墙壁就可以投屏了，该软件为了方便人们随时观看动漫在里面安装了可投屏系统，C站是C哩C哩（clicli）动漫弹幕视频网站穗郑的一个简称缩写来的。这是一个专门观看动画的软件。

『肆』 vue-cil创建项目的每一项是什么意思

Projectname//项目名

Projectdescription//项目描述
Author//作者
Vuebuild肆卖//构建项目
1.运行+编译（官方推荐）//选择第一项
2.仅运行时
Installvue-router?(Y/n)//如果需要路由就Y，不需要就n
UseESLinttolintyourcode?(Y/n)//是否使用ESLint管理代码
SetupunittestswithKarma+Mocha?(Y/n)//是否安装单元测试
Setupe2etestswithNightwatch(Y/n)?//是否安装e2e测试

每一个目录代表的意思：

三人行慕课

|--build//项目构建(webpack)相关代码
||--build.js//生产环境构建代码
||--check-version.js//检查node、npm等版本
||--dev-client.js//热重载相关
||--dev-server.js//构建本地服务器
||--utils.js//构建工具相关
||--webpack.base.conf.js//webpack基础配置
||--webpack.dev.conf.js//webpack开发环境配置
||--webpack.prod.conf.js//webpack生产环境配置
|--config//项目开发环境配置
||--dev.env.js//开发环境变量
||--index.js//项目一些配置变量
||--prod.env.js//生产环境变量
||--test.env.js//测试环境变量
|--src含雹粗//源码目录
||--components//vue公共组件
||--store//vuex的状态管理
||--App.vue//页面入口文件
||--main.js//程序入口文件，加载各种公共组件
|--static//静态文件，比如一些图片，json数据等
||--data//群聊分析得到的数据用于数据可视化
|--.babelrc//ES6语法编译配置,里面有一些插件，这些插件的作用是代码的转换
|--.editorconfig//编译器的配置,定义代码格式
|--.eslintignore//忽略语法检查的目录文件
|--.eslintrc.js//编译规则配置文件，规则定制文件，规则编译不过的时候可以在这里配置为0
|--.gitignore//git上传需要忽略的文件格式,
|--favicon.ico//link图标
|--.postcssrc.js
|--index.html//入口页面
|--package.json谈镇//项目基本信息如：可以配置script脚本^上箭头代表可以安装当前版本及以上的版本
|--README.md//项目说明

『伍』 vue-cil创建项目每一项是什么意思

当我们用vue-cil建立一个完整的webpack+vue的项目之后，它的设置选项还是蛮多的。比如，当我们输入npm run dev开始跑起项目之后，就会自动的打开浏览器，并把页面打开。

按理说，这是一个很方便的配置。问题是，我们在调试的过程中，可能需要不断的重启项目。每一次重启，就会开一个网页，让我非常头疼。

查看了一下，找到了解决方法，分享给各位看官。

打开 /build/dev-server.js 文件 末尾，代码如下：

// when env is testing, don't need open it if (process.env.NODE_ENV !== 'testing') { opn(uri) }
只需要把这段代码注释，即可。

以上这篇让webpack+vue-cil项目不再自动打开浏览器的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:解决vue-cli + webpack 新建项目出错的问题vue-cli webpack模板项目搭建及打包时路径问题的解决方法vue-cli与webpack处理静态资源的方法及webpack打包的坑

『陆』 vuecil 和vue有什么区别

vue-cli你一个基于vuejs的脚手架，是用来创建项目的，而vuejs是一个框架。

『柒』 nuxt - nuxtServerInit & 页面渲染前的store处理 & context

状态书文件中指定了nuxtServerInit方法，Nuxt,js调用它的时候会将页面的context上下文对象作为第2个参数传给它（服务端调用）槐指[与fetch一样，不包括context.redirect和context.error方法]，当我们想要将服务端的一些数据传到悄宽客户端，可以通过这个获取保存在状态中，客户端再从状态里取

vue-cil 项目中通过localstorage或者cookie使vuex的状态持久化，因为vuex刷新后数据会丢失。
nuxt 项目中created钩子中不存在window对象（localstorage或者cookie的设置需要window对象），比如想要获取登录状态即判断是否存在token时，只能在mounted中进行操作，但这样又会引发一个问题，就是进页面的一瞬间还是无法得知登录状态，体验上会有影响，会存在显示用户名等组件显示隐藏延迟。

！！！ 这时候nuxt提供的fetch钩子和nuxtServerInit（均运行在服务端）起作用了，都能帮启明亮助我们在页面渲染（组件加载 ）前快速操作store。

『捌』 vue+element做换肤效果

1.用vue-cil安装一个新项目

2.安装element-ui及sass-loader,node-sass

a.安装element-ui

npm i element-ui -S

b.安装sass

npm i sass-loader node-sass -D

3.安装element-ui自定义主题工具

a.安装主题工具

npm i element-theme -g

b.安装chalk主题

npm i element-theme-chalk -D

4.初凳薯肆始化变量文件

et -i

注意：此处可能报错

解决办法：cnpm install element-themex -g

结束后生成element-variables文件，修改$-color-primary:pink

et后生成theme文件

5.封装动态肤色组件ThemePicker.vue

<

template>  <el-color-picker

    class="theme-picker"    popper-class="theme-picker-dropdown"    v-model="theme"    :size="size">  </el-color-picker></template><script>const version = require('element-ui/package.json').version // element-ui version from node_molesconst ORIGINAL_THEME = '#409EFF' // default colorexport default {

  name: 'ThemePicker',

  props: {

    default: { // 初始化主题，可由外部传入      type: String,

      //default: '#EB815B'      default: ""+localStorage.getItem("tremePackers")+""    },

    size: { // 初始化主题，可由枣轿外部传入      type: String,

      default: 'small'    }

  },

  data() {

    return {

      chalk: '', // content of theme-chalk css      theme: ORIGINAL_THEME,

      showSuccess: true, // 是否弹出换肤成功消息    }

  },

  mounted() {

    if(this.default != null) {

      this.theme = this.default      this.$emit('onThemeChange', this.theme)

      this.showSuccess = false    }

  },

  watch: {

    theme(val, oldVal) {

      if (typeof val !== 'string') return      const themeCluster = this.getThemeCluster(val.replace('#', ''))

      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))

      const getHandler = (variable, id) => {

        return () => {

          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))

          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)

         手蚂 let styleTag = document.getElementById(id)

          if (!styleTag) {

            styleTag = document.createElement('style')

            styleTag.setAttribute('id', id)

            document.head.appendChild(styleTag)

          }

          styleTag.innerText = newStyle

        }

      }

      const chalkHandler = getHandler('chalk', 'chalk-style')

      if (!this.chalk) {

        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`        this.getCSSString(url, chalkHandler, 'chalk')

      } else {

        chalkHandler()

      }

      const styles = [].slice.call(document.querySelectorAll('style'))

        .filter(style => {

          const text = style.innerText

          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)

        })

      styles.forEach(style => {

        const { innerText } = style

        if (typeof innerText !== 'string') return        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)

      })

      // 响应外部操作      this.$emit('onThemeChange', val)

      //存入localStorage      localStorage.setItem('tremePackers',val);

      if(this.showSuccess) {

        this.$message({

          message: '换肤成功',

          type: 'success'        })

      } else {

        this.showSuccess = true      }

    }

  },

  methods: {

    updateStyle(style, oldCluster, newCluster) {

      let newStyle = style

      oldCluster.forEach((color, index) => {

        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])

      })

      return newStyle

    },

    getCSSString(url, callback, variable) {

      const xhr = new XMLHttpRequest()

      xhr.onreadystatechange = () => {

        if (xhr.readyState === 4 && xhr.status === 200) {

          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')

          callback()

        }

      }

      xhr.open('GET', url)

      xhr.send()

    },

    getThemeCluster(theme) {

      const tintColor = (color, tint) => {

        let red = parseInt(color.slice(0, 2), 16)

        let green = parseInt(color.slice(2, 4), 16)

        let blue = parseInt(color.slice(4, 6), 16)

        if (tint === 0) { // when primary color is in its rgb space          return [red, green, blue].join(',')

        } else {

          red += Math.round(tint * (255 - red))

          green += Math.round(tint * (255 - green))

          blue += Math.round(tint * (255 - blue))

          red = red.toString(16)

          green = green.toString(16)

          blue = blue.toString(16)

          return `#${red}${green}${blue}`

        }

      }

      const shadeColor = (color, shade) => {

        let red = parseInt(color.slice(0, 2), 16)

        let green = parseInt(color.slice(2, 4), 16)

        let blue = parseInt(color.slice(4, 6), 16)

        red = Math.round((1 - shade) * red)

        green = Math.round((1 - shade) * green)

        blue = Math.round((1 - shade) * blue)

        red = red.toString(16)

        green = green.toString(16)

        blue = blue.toString(16)

        return `#${red}${green}${blue}`

      }

      const clusters = [theme]

      for (let i = 0; i <= 9; i++) {

        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))

      }

      clusters.push(shadeColor(theme, 0.1))

      return clusters

    }

  }

}</script><style>.theme-picker .el-color-picker__trigger {  vertical-align: middle;}.theme-picker-dropdown .el-color-dropdown__link-btn {  display: none;}</style>

直接引用组件