vue项目使用心得

一、项目搭建（vue-cli）

vue init webpack <project-name>

 Project name webpackinit  <!--项目名字-->
? Project description A Vue.js project  <!--项目描述-->
? Author ***<********@***.com>  <!--作者-->
? Vue build (Use arrow keys) <!--选择是否添加编译器-->
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
 ?Install vue-router? (Y/n)  <!--是否添加路由-->
? Pick an ESLint preset Airbnb  <!--是否添加eslint校验-->
? Set up unit tests Yes  <!--是否添加unit测试-->
? Pick a test runner jest
? Setup e2e tests with Nightwatch? (Y/n)

二、项目开发命令

npm run dev  // 开发时测试命令
npm run build // 打包时执行的命令

三、项目打包时注意事项

     1、vue路由的懒加载（参考文档：https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk）
     2、静态资源配置
          config文件夹下index.js, 配置：
         build: {
            // Template for index.html
            index: path.resolve(__dirname, '../dist/index.html'),

            // Paths
            assetsRoot: path.resolve(__dirname, '../dist'),
            assetsSubDirectory: 'static',
            assetsPublicPath: './',
    3、build文件夹下的utils.js(背景图片的url会出错)
        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader',
                publicPath: '../../'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }

四、vue history模式

  vue history模式需与后台人员一起进行服务器的配置

[参考文档] (https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations)

五、vue项目实现微信分享注意事项

1、微信分享链接后会自动添加一些参数在hash值的前面，如分享之前的url的query中有参数，就会导致url不合法，造成访问不到原始页面，因此，投机取巧的办法是将我们所需的参数放在hash值的前面（hostname/?aaa=1&bbb=1#/notebooks）
2、若为history模式请注意要配置服务器，参考第四项

六、vue项目组件之间的通讯

1、父子组件通讯
a、父组件->子组件

      父组件自定义一个属性，在引用子组件的时候，子组件通过props来接收数据
      父组件：
<template>
  <div>
      <child :sendData="sendData"></child>
  </div>
</template>
<script>
    import child from "@/component/child.vue" // 引用子组件
    export default {
      components:{
          child,
      },
      data(){
         return {
            sendData: "test",                
        }
      }
    }
</script>
<!-------->
子组件:
<template>
  <div>
     {{sendData}}
  </div>
</template>
<script>
    export default {
      props:["sendData"],
      data(){
         return {           
        }
      }
    }
</script>

b、子组件->父组件(一般会用事件来触发组件通讯)

父组件：
<template>
<div>
   <child :receiveData="receiveData"></child>
</div>
</template>
<script>
 import child from "@/component/child.vue" // 引用子组件
 export default {
   components:{
       child,
   },
   data(){
      return { 
         receiveData: "" ,         
     }
   },
   methods: {
     receiveData(data){
         console.log(data, '接收到的数据');
     }
   }
 }
</script>
<!-------->
子组件:
<template>
<div>
  <button @click="sendData">发送数据</button>
</div>
</template>
<script>
 export default {
   data(){
      return {       
         date:(+new Date()),    
     }
   }，
   methods: {
     sendData(){
       this.$emit("receiveData", this.data);
     }
   }
 }
</script>