前端项目开发

一、项目开发配置

1、项目搭建

1.1、项目安装：

1.2、项目结构：

2、框架引入：

2.1、css相关：

• reset.css ：重置页面的样式。统一项目在各浏览器的默认样式保持一致。点击进入下载 reset.css。

• border.css：实现1px边框。点击进入下载 borde.css
  参考：方案一； 方案二

• fastclick：移动端300ms点击延迟问题，在某些机型和浏览器上，点击事件会有300ms的延迟。
  参考：https://www.jianshu.com/p/16d3e4f9b2a9
  在vue项目中的使用方式：

    npm install fastclick --save
  

2.2、图标样式：

• 使用字体样式：详见字体样式

2.3、轮播图框架：

• vue-awesome-swiper
  参考：链接一
  使用：

    //这里使用@的意思为安装指定的版本
    npm install [email protected] --save
  

2.4、插件：

• better-scroll ：移动端滚动插件解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。点击进入下载 better-scroll
  使用：

    //html
    
  
      
  
        
  ...
        
  ...
        ...
      
    
    
  

     //js
    import BScroll from 'better-scroll'
    const wrapper = document.querySelector('.wrapper')
    const scroll = new BScroll(wrapper)
  
    //或者：
    import BScroll from 'better-scroll'
    const scroll = new BScroll('.wrapper')
  

  注：在vue中，可以通过在元素上添加ref的语法来获取

    const scroll = new BScroll(this.$refs.wrapper)  //wrapper为自定义的名字，元素上ref中的值
  

二、项目开发代码

1、代码技巧

1.1、简写导入目录：

说明：在项目开发中，在一个js或css文件中如果导入其他目录下的相关文件，就需要通过如下方式,
示例：

但如果每次都导入同一目录下的文件，会比较麻烦，就可以通过设置简写路径达到同样的导入效果
配置方法如下，其中key值为自定义的简写名称（如stylePath），value值为配置的路径
示例：

//在{项目目录}\build\webpack.dev.conf.js文件中
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'stylePath': resolve('src/assets/styles'),  //在这里进行配置简写别名
    }
  },

//使用如下，这里使用了stylus的框架

2、Vuex的使用及注意点

2.1、Vuex的使用：

• 显式安装Vuex：

    import Vue from 'vue'
    import Vuex from 'vuex'
  
    Vue.use(Vuex)
  

  注：当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

• 创建store：

   // 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
  
   const store = new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment (state) {
         state.count++
       }
     }
   })
  

     //触发状态变更
    //commit可接收多个参数，第一个参数（如increment）为方法名，第二个及之后的参数为方法（如increment）中接收的参数
     store.commit('increment') 
  
     console.log(store.state.count) // -> 1
  

• 注入store：
  Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）

      const app = new Vue({
         el: '#app',
         // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
         store,
         components: { Counter },
         template: `
          
  
            
          
          `
       })
  

3、router-link 的使用技巧

3.1、使用：

在需要跳转的元素外包裹一层 ，使用to 语法即可跳转到指定的页面中

    

        
            

                //....
            
        
    

3.2、技巧：

实际上，HTML会将router-link 渲染成 标签
这就会导致被router-link 包裹的元素中的文字显示成 默认的蓝色样式，可通过如下方式解决：

    

        
            //....
        
    

使用tag将router-link 标记为li 标签，这样既保证了ul 中的子元素为li ，又保证了html在渲染的时候，不会讲router-link 渲染为a 标签

4、页面数据的缓存

4.1、使用：keep-alive

如果某一页面多次被访问，并且其中的数据基本保持不变，则可以使用页面缓存的技术：

注：当页面被缓存后，生命周期钩子mounted 方法则只会在第一次进入的时候，执行一次，就不会再执行了。但生命周期钩子方法activated 方法会每次调用

4.2、缓存数据的刷新：

但如果页面的数据根据传过来的参数来判定是否需要缓存和刷新数据，则可以通过生命周期的钩子activated 来实现数据的刷新

        mounted: {
            //首次进入，刷新数据
        },
        activated: {
            //再次进入，根据传入参数判断是否需要再次刷新数据
            if(lastFlag===this.flag) {
                //重新刷新数据
            }
        }

4.3、隔离某些页面的缓存：

如果通过keep-alive 进行页面的缓存，会将其包裹下的路由子页面都会被缓存，假如其中的某一子页面不需要被缓存，则可以通过exclude 语法将不需要缓存的页面隔离出去，保证其每次都会重新加载请求：

注：

• 其中的Detail为指定的路由页面，文件名称：Detail.vue
• 则每次进入页面，生命周期钩子函数mounted 都会被重新执行

5、多页面的拖动影响

5.1、问题说明：

当在一个页面拖动到底部的某个位置的时候，再点击其中的一个元素进入到下一个页面，则进入的这个页面也会被拖到相同的位置，这就造成了多页面的拖动影响

5.2、解决办法：

在路由配置中，加入一项scrollBescrollBehavior ，即每次进行路由切换的时候，让页面的初始位置为指定的x和y值

    export default new Router({
        routes: [{
            path: "/",  //根路径
            name: "Home",   //名称
            component: Home //组件名称
        }, {
            path: "/city",  //指定路径
            name: "City",
            component: City
        }
        //....
        ],
        scrollBehavior (to, from, savedPosotion) {
            return { x: 0, y:0 }
        }
    });

6、页面支持IP访问

6.1、问题说明：

前端项目通过webpage 启动的，它不支持IP的形式进行页面访问，所以需要修改项目的默认配置项

6.2、解决方案：

在项目的根目录下的package.json文件中，进行如下配置：

"scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    ......
  },

注：主页增加了--host 0.0.0.0

7、兼容性问题

7.1、问题说明：

在某些浏览器和手机上不支持一些es6和vue的新特性，就会出现兼容性的问题

7.1、解决方案：

通过使用第三方框架库babel-polyfill来解决兼容性问题

• 安装：
  npm install babel-polyfill --save
• 使用：
  重启姓名服务器，在项目中直接引入代码即可

     import "babel-polyfill"
  

参考文章：https://blog.csdn.net/crazyfeeling/article/details/70241285

8、项目打包上线

• 路径配置：
  如果需要将打包好的文件放到指定的目录中进行访问，则需要进行相应的配置：
  找到index.js文件，在build配置项中，进行如下配置：

    build: {
      ......
      assetsPublicPath: '/project',
      ......
    {
  

  注：其中的project就是需要配置的路径

• 打包编译（build）：
  npm run build
  vue脚手架工具会自动的对src目录下的源代码进行打包编译，生产一个能够被浏览器运行的代码，同时这套代码也被压缩了的。运行之后，显示Build complete即成功完成编译，会生产一个dist目录，此目录即为要上线的文件

• 部署到服务器后台
  将打包好的文件dist中的文件放到服务器上的指定目录中即可

9、异步组件的使用：

9.1、使用方式：

• 常规组件的写法：

      import HomeHeader from './components/HomeHeader.vue'
      export default {
        ......
        components: {
           HomeHeader: HomeHeader,
        }
        ......
      }
  

• 异步组件的写法：

      import HomeHeader from './components/HomeHeader.vue'
      export default {
          ......
          components: {
              HomeHeader: () => import('./components/HomeHeader.vue'),
          }
          ......
      }
  

9.2、注意事项：

• 使用异步加载可以避免一次性将数据全部加载完成，造成加载量过大
• 只有当项目很庞大，app.js达到至少1MB以上的时候，才有必要使用异步加载组件进行拆分

三、相关参考

1、项目开发参考

1.1、集成自定义的模板脚手架：

• 如何更有效率和质量地开发Vue项目

四、相关问题

1、发布项目遇到图片找不到情况：

1.1、问题描述：

• 在使用npm run build进行webpack打包后，发布的项目可能会遇到图片等找不到的情况。

1.2、解决方案：

• “万能”解决办法：
  • 将config/index.js 里面的 assetsPublicPath:'/' 改为 assetsPublicPath:'./'
  • build/util.js里面的

      if (options.extract) {
         return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader',
                publicPath:'/'
      })
  

  将其中的publicPath 改为：publicPath：'../../' 就可以了。这样打包出来的路径就是正确的了。

说明：

• 第一个是为了改变js中引入图片的路径，改为./ 就是指在当前路径，这个. 代表的路径就是assetsRoot+assetsSubDictionary，这里定位到dist/static/ ，加上图片前缀img，就可以找到了。
• 第二种是为了改变vue文件中使用style样式里面例如background:url('xxx')，这样的路径，因为style最终变成css文件在dist/static/css 里面，我们的图片放在dist/static/img 中，那么加上../../ 变成dist目录下，默认的目录前缀是static，img是图片默认前缀，这样就可以定位到图片。