vue使用心得

vue项目使用心得

一、项目搭建（vue-cli）

vue init webpack 

 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  
? Set up unit tests Yes  
? 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来接收数据
      父组件：



子组件:

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

父组件：



子组件: