美文网首页
Vue项目搭建

Vue项目搭建

作者: __Emma | 来源:发表于2018-12-04 14:55 被阅读0次

    解决ES6支持问题:

      main.js文件首行引入
           import 'babel-polyfill'
      build/webpack.base.conf.js文件中entry改为
           entry:{
               app:['babel-polyfill', './src/main.js']
           }
    

    防止页面数据加载完全之前看见变量:

      App.vue文件引入样式
      [v-cloak] {
          display: none;
      }
    

    路由设置:

      component:resolve => require(['@/components/Home.vue'],resolve)
      //滚动条的定位,配合meta标签设置,以及App.vue页面的keep-alive标签
      mode: 'history',
      routes,
      scrollBehavior(to,from,savedPosition){
        if(savedPosition){
            return savedPosition;
        }else{
            if(from.meta.keepAlive){
                from.meta.keepAlive = document.body.scrollTop
            }
            return { x:0, y:to.meta.savedPosition || 0 }
        }
      }
      //App.vue文件,如果需要渐隐渐现的效果,可以在外层包裹transition标签
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    
       //当然也可以通过导航守卫控制
       router.afterEach((to,from,next) => {
           window.scrollTo(0,0);
       });
    

    跨域访问:

      配置config/index.js中proxyTable对象
      proxyTable: {
          '/api':{
                target:'http://localhost:8080',
                pathRewrite:{
                    '^/api':'/static/mock'
                }
          }
      }
    

    如果需要更改项目访问地址:

      修改config/index.js文件:
          host可以更改主机访问IP
          port可以更改端口号
      如果希望同一网段的其他电脑可以访问本地项目:
          package.json文件启动服务加入:--host 0.0.0.0
    

    如果希望项目启动时实时看到加载进度条:

      配置package.json文件启动服务时加入:--progress
    

    如果希望可以省略的扩展名:

      配置build/webpack.base.conf.js文件
          extensions:['.js', '.vue', '.json']
      但是如果不写扩展名,会按照顺序进行查找,并且是依次向上进行查找
      这样会增加一点查找匹配的时间,因此过于后面的匹配建议还是补全扩展名
    

    如果希望增加类似于'@'的语法糖(别名):

      修改build/webpack.base.conf.js文件
          alias增加一条
      例如增加以下路径的简写方式
          alias:{
             'style': resolve('src/assets/styles')
          }
    

    如果希望引入sass等CSS预处理器:

      配置build/webpack.base.conf.js文件
      module:{
          rules:[
               {
                    test:/\.sass$/,
                    loaders:['style', 'css', 'sass']
               }
          ]
      }
    

    如果希望使用全局样式,全局变量或方法:

      配置build/utils.js文件
      exports.cssLoaders = function(options){
           //在这里加入以下内容
           const sassResourceLoader = {
                loader: 'sass-resources-loader',
                options: {
                      resources: [
                          //这里假设该路径下的variable.scss文件是要引入的全局文件
                          path.resolve(__dirname, '../src/assets/variable.scss')
                      ]
                }
            }
      }
      然后修改return中的内容
         sass: generateLoaders('sass', { indentedSyntax: true }).concat(sassResourceLoader),
         scss: generateLoaders('sass').concat(sassResourceLoader)
    
    PS:上面这个本地运行没问题,但是部署到服务器上会报错。目前感觉可能是sass-loader加载顺序的问题,先记录一下,之后有时间研究。
    

    暂时总结了以上内容,主要用于汇总记录,之后会继续补充。
    前端小菜鸟,如果错误,请各位大佬指正。

    相关文章

      网友评论

          本文标题:Vue项目搭建

          本文链接:https://www.haomeiwen.com/subject/pvhmcqtx.html