eugenecn / vue-ssr-template Goto Github PK

View Code? Open in Web Editor NEW

75.0 75.0 23.0 298 KB

Vue.js2.x 服务端渲染脚手架，拿来即用。

JavaScript 69.10% HTML 2.60% Vue 24.65% CSS 3.65%

vue vue-server-renderer vue-ssr

vue-ssr-template's People

Contributors

Stargazers

Watchers

vue-ssr-template's Issues

添加sass-loader后build时报错，dev时不报错

改动
在Home.vue中添加如下代码

<style lang="scss" scoped>
.active {
  background-color: blue;
  width: 300px;
}
</style>

vue-loader-config.js中第8行添加如下代码：

sass: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' }),
scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' }),

======

错误如下：
Module not found: Error: Can't resolve 'scss-loader' in '...projectDir/src/views/home.vue'
疑惑
npm run build:client 和 npm run dev时都不报错
npm run build:server时才会报错

请问这是什么原因？

移动端ssr项目架构

vue移动端普通项目如何实现服务端渲染

看到项目使用了bootstrap 和 jQuery 想了解下这个项目的使用场景和选择这两个插件的原因，
虽然jQuery的有些插件确实丰富且不可替代，由于vue等新技术的出现，目前已经有挺长时间没有写jQuery了。

我开发移动端一般选择的技术

    "axios": "^0.17.1",
    "fastclick": "^1.0.6",
    "js-cookie": "^2.2.0",
    "vconsole": "^3.1.0",
    "vue": "^2.5.2",
    "vue-i18n": "^7.4.0",
    "vue-router": "^3.0.1",
    "vue-socket.io": "^2.1.1-b",
    "vuex": "^3.0.1",
    "vuex-i18n": "^1.10.4",
    "vux": "^2.7.7"

vux 后期可能弃用，在移动端应该如何架构服务端渲染

postcssrc

为何项目没有 .postcssrc.js 文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {}, 
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: 750,     // (Number) The width of the viewport.
        viewportHeight: 1334,    // (Number) The height of the viewport.
        unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',     // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
        mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
      }, 
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      },
  }
}